@font-color: #fff;

@sub-font-color: #adadad;

@border-color: #35353e;

@main-bg-color: #16161a;

@header-bg-color: #212124;

@sub-bg-color: #25252c;

@hover-brder: #11CCB1;

.ph-wrap{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    z-index:115;
}
.vue-waterfall{
    padding-left:10px;
}
.img-list-page{
    width:100%;
    overflow-x:hidden;
    .vue-waterfall{
        // width:101%;
        // margin-left: -1%;
    }
}
.t-adv{
    width:100%;
    height:60px;
    position: relative;
    background-color:rgb(17, 204, 177);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img{
        // width:100%;
        height:100%;
        object-fit: cover;
    }
    .close-tadv{
        position: absolute;
        right:6px;top:6px;
        width:20px;height:20px;
        background:url('../../assets/pro/pt_close_adv.svg') no-repeat;
        background-color: rgba(0, 0, 0, .2);
        // background-size:1em;
        background-position:center;
        border-radius:10px;
    }
    .adv-txt{
        border: 1px solid rgba(255,255,255,0.4);
        font-size:10px;
        line-height:15px;
        width:27px;
        text-align: center;
        border-radius:2px;
        position: absolute;
        background: rgba(0, 0, 0, .2);
        right:6px;bottom:6px;
        border-radius:4px;
    }
}
.pages{
    margin:48px auto;
}


.clr-all{
    color:#9A9A9C;
    background-image:url('../../assets/pro/l_filter_clr.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size:18px;
    line-height:35px;
    height:35px;
    padding-left:22px;
    font-size:14px;
    // margin-left:20px;
    margin-top:3px;
    &:hover{
        color:#52565A;
    }
}

.them-area{
    padding:5px 6px;
    border-radius:24px;
    height:30px;
    cursor: pointer;
    // margin-left:27px;
    // margin-right:30px;
    display: flex;
    background: rgba(255,255,255,0.1);
    margin-top:7px;
    align-items: center;
    min-width:30px;
    justify-content: center;
    // .thm{
    //     width:24px;
    //     height:24px;
    //     min-width:24px;
    //     border-radius:24px;
    // }
    // a{
    //   width:24px;height:24px;
    //   min-width:24px;
    //   border-radius:24px;
    //   &.light{
    //     background-image:url('../../assets/pro/th_light_active.svg');
    //     background-size:cover;
    //     background-position:center;
    //     background-color:#fff;
    //   }
    //   &.dark{
    //     background-image:url('../../assets/pro/th_dark.svg');
    //     background-size:cover;
    //     background-position:center;
    //   }
    // }
}
.new-pageation-btn{
    margin:48px auto;
}

.common-icon-clear-inp {
    min-width: 16px;
    height: 16px;
    background: url('../20220311/inp_icon_clear.png') no-repeat;
    background-size: cover;
    margin-right: 14px;
    cursor: pointer;
    transition: 0.2s all linear;
  }
  .common-icon-clear-inp:hover {
    opacity: 0.7;
  }
.n-h-s-type-nav{
    font-size:18px;
    font-weight:500;
    padding-left:20px;
    min-width:150px;
    line-height:54px;
    border-radius:54px;
    background:#ebedf5;
    cursor: pointer;
    transition:.3s all linear;
    position: relative;
}
.n-h-s-type-nav:after{
    width:20px;height:20px;
    background:url('../../assets/images/iconq39.png') no-repeat;
    background-size: cover;
    content:'';
    display: block;
    position: absolute;
    right:15px;
    top:18px;
}
.new-page-layout{
	display: flex;
	align-items: center;
	justify-content: center;
}
.new-page-layout .page-prev{
	width:52px;height:52px;
	background-image:url('../../assets/nine/pageNavPrev_new.png');
	background-repeat: no-repeat;
	background-size: 52px 52px;
	cursor: pointer;
	border-radius:50%;
}
.new-page-layout .page-prev:active{
	background-image:url('../../assets/nine/pageNavNext.png');
	background-repeat: no-repeat;
	background-size: 52px 52px;
	transform: rotate(180deg);
}
.ul-imgq1{
    margin-top: 26px;
    overflow: hidden;
    li {
        float: left;
        margin-right: 80px;
        overflow: hidden;
    }
}
.new-page-layout .page-next{
	width:52px;height:52px;
	background-image:url('../../assets/nine/pageNavPrev_new.png');
	background-repeat: no-repeat;
	background-size: 52px 52px;
	transform: rotate(180deg);
	cursor: pointer;
	border-radius:50%;
}
.new-page-layout .page-next:active{
	background-image:url('../../assets/nine/pageNavNext.png');
	background-repeat: no-repeat;
	background-size: 52px 52px;
	transform: rotate(0deg);
}
.new-page-layout .page-tip{
	font-size:16px;
	color:#808080;
	margin:0px 18px;
}
.b-empty-box{
    text-align: center;
}
.zan-page{
    // overflow-x: hidden;
    .vue-waterfall{
        // width:101%;
        // margin-left: -1%;
    }
}
.following-page .games .fav-d-item{

}
.work .left-con{
    .first-scroll{
        max-height:calc(100vh - 84px);
    }
}
.list-data-box .top-filter-area{
    .flc{
        display: flex;
        align-items: center;
    }
    .col-side-bar{
        min-width:32px;
        height:32px;
        max-width:32px;
        border-radius:9px;
        background-image:url('../../assets/pro/collapse_menu.svg');
        background-repeat:no-repeat;
        background-position: center;
        background-size:20px;
        margin-right:7px;
        // margin-top:10px;
        transition:.1s all linear;
        display: none;
        &:hover{
            background-color:#242327;
        }
    }
}
.pro-page-layout{
    text-align: center;
    margin-top:20px;
    .el-pagination{
        .btn-next,.btn-prev{
            width:34px;height:34px;
            line-height: 34px;
            background:#181818 !important;
            color:#969696 !important;
            border-radius:8px !important;
        }
        .el-pager{
            li{
                width:34px;height:34px;
                line-height: 34px;
                background:#181818 !important;
                color:#969696 !important;
                border-radius:8px !important;
                font-size:12px;
                margin:0px 6px;
                &.active,&:not(.disabled).active{
                    background:#181818 !important;
                    color:#fff !important;
                }
                &:hover,&:not(.disabled):hover{
                    color:#fff !important;
                }
            }
        }
    } 
}
.bsearch{
    background:#11CCB1;
    color:#fff;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    padding: 0px 44px;
    transition: 0.1s all linear;
    line-height:44px;
    display: inline-block;
    margin-top:30px;
    &:hover{
        background:#0fab94;
    }
}
.g-img-mx-harea{
    max-height:860px !important;
}
.game-img-workbox{
    position: relative;
}
.bot-single-upload-area{
    position: absolute !important;
    left: 0px;
    right: 0px;
    // bottom:0px;
}
.loading-mask{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background:#000;
    z-index:115;
    opacity:0;
}
.q-f-item-wrap .sp-replacer{
    z-index: -1;
}
.menu-mask{
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:116;
    top:0px;
    background: rgba(0,0,0,0.2);
    backdrop-filter: saturate(180%) blur(16px);
    transition:opacity .2s ease-in;
    visibility: hidden;
}

.zw-fn-el{
    display: flex;
    align-items: center;
    flex-direction:column;
    width:calc(100% - 394px);
    position: relative;
    // max-width: calc(100% - 680px);
    margin-left:20px;
    .seach-bx{
        margin-left:0px !important;
        margin-right:0px !important;
    }
}
.zw-fn-sch-el{
    display: flex;
    align-items: center;
    flex-direction:column;
    max-width:calc(100% - 995px);
    width:100%;
    position: relative;
    // max-width: calc(100% - 960px);
    margin-left:20px;
    .seach-bx{
        margin-left:0px !important;
        margin-right:0px !important;
    }
}
@keyframes shineg {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}
.waf-ligan-item{
    border:1px solid red;
    // &:not(.no-data):hover{
    //     &:after{
    //         content:'';
    //         position: absolute;
    //         top: 0;
    //         left: -100%;
    //         width: 50%;
    //         height: 100%;
    //         background: linear-gradient(90deg, transparent, rgba(255, 82, 131, 0.4), transparent);
    //         transform: skewX(-25deg);
    //         transition: 0.5s;
    //         pointer-events: none;
    //         mix-blend-mode: screen;
    //         animation: shineg 1.5s infinite;
    //     }
    // }
}
// .works-list-page .games-data .dx-vd-item .fav-d-item:hover, .article-list-page .games-data .dx-vd-item .fav-d-item:hover{
//     .img-flex-box{
//         &:after{
//             content:'';
//             position: absolute;
//             top: 0;
//             left: -100%;
//             width: 50%;
//             height: 100%;
//             background: linear-gradient(90deg, transparent, rgba(255, 82, 131, 0.4), transparent);
//             transform: skewX(-25deg);
//             transition: 0.5s;
//             pointer-events: none;
//             mix-blend-mode: screen;
//             animation: shineg 1.5s infinite;
//         }
//     }
// }
// .game-list-page .games-data .gd-item:hover, 
// .games-page .games-data .gd-item:hover,
// .center-b-area .b-a-left .ba-datas .bdl-data-item:hover,
// .zj-ba-data .data-wrap .bdl-data-item:hover,
// .all-games .data-wrap .bdl-data-item:hover,
// .collections-page .fav-datas .fav-d-item:not(.create-btn):hover,
// .browse-records .games-data .dx-vd-item:hover,
// .works-page .wp-content-lft .work-datas .wk-d-item:hover .img-box,
// .article-page .wp-content-lft .work-datas .wk-d-item:hover .img-box,
// .hot-row li a.img-box:hover,
// .follow-exclusive-settings .atlas-layout-column .fav-d-item:hover .top-b,
// .follow-exclusive-settings .atlas-list .atla-item:hover .img-box,
// .uhome .fav-datas .fav-d-item:hover .img-flex-box,
// .atlas-layout-column .fav-d-item:hover .img-flex-box,
// .game-list-page .games .fav-d-item:hover .img-flex-box,
// .games-page .top-games li:hover,
// .work .right-con-box .recommends a:hover .img-flex-box,
// .search-page .jitu-wrap.clt-fld-area .data-box:hover .t-imgs,
// .search-page .list-wrap.wk-list-area .list-box .bdl-data-item:hover .img-flex-box,
// .search-page .list-box .bdl-data-item:hover .t-imgs,
// .game-page .center-info .gm-imgs .img-item:hover,
// .game-page .center-info .xg-games .bdl-data-item:hover,
// .comp-article-page .tj-box .xg-games .bdl-data-item:hover{
//     &:after{
//         content:'';
//         position: absolute;
//         top: 0;
//         left: -100%;
//         width: 50%;
//         height: 100%;
//         background: linear-gradient(90deg, transparent, rgba(255, 82, 131, 0.4), transparent);
//         transform: skewX(-25deg);
//         transition: 0.5s;
//         pointer-events: none;
//         mix-blend-mode: screen;
//         animation: shineg 1.5s infinite;
//     }
// }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.m-at-con-wrap{
    .first-all.no-data{
        background:#1D1D1F;
        border-radius:32px;
        margin-right:46px;
    }
}
.user-swp-wrap{
    .no-data{
        background:#1D1D1F;
        border-radius:32px;
    }
}
.search-page .game-tab-page .list-box .bdl-data-item,.search-page .list-wrap.wk-list-area .list-box .bdl-data-item{
    min-height:240px;
}
.img-component .b-img-box .im-wrap.show .left-m-img.no-data,
.hot-row li.no-data,
.center-b-area .b-a-left .ba-datas .bdl-data-item.no-data,
.ho-dds li.no-data,
.hot-gx-data .item.no-data,
.ald-ba-data .data-wrap .bdl-data-item.no-data,
.zj-ba-data .data-wrap .bdl-data-item.no-data,
.zj-ba-data .yx-cates .yx-c-item.no-data,
.game-list-page .games-data .gd-item.no-data,
.games-page .games-data .gd-item.no-data,
.works-list-page .games-data .dx-vd-item.no-data,
.article-list-page .games-data .dx-vd-item.no-data,
.games-page .top-games li.no-data,
.article-single-page .wp-content-lft .work-datas .wk-d-item.no-data,
.article-single-page .wp-content-rt .rank-datas li.no-data,
.recruit-page .recruit-page-conbox .layout-box .left .job-item.no-data,
.rank-page .list-box .list-item.no-data,
.uhome .fav-datas .fav-d-item.no-data,
.uhome .atlas-layout-column .fav-d-item.no-data,
.collections-page .fav-datas .fav-d-item.no-data,
.follow-exclusive-settings .users .user-item.no-data,
.follow-exclusive-settings .fans-datas .fans-item.no-data,
.follow-exclusive-settings .atlas-layout-column .fav-d-item.no-data,
.follow-exclusive-settings .atlas-list .atla-item.no-data,
.following-page .atlas-layout-column .fav-d-item.no-data,
.rank-page .rank-l .content-list-area .item.no-data,
.following-page .games .fav-d-item.no-data{
    position: relative;
    overflow: hidden;
    min-height:290px;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite;
    }
}
.m-at-con-wrap .first-all.no-data,.user-swp-wrap .no-data{
    position: relative;
    overflow: hidden;
    min-height:64px;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite;
    }
}
.wf-no-data .waf-ligan-item .no-data{
    position: relative;
    overflow: hidden;
    display:block;
    visibility:visible;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite;
    }
}
// 图片表情打call动画
.animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 105;
}

.falling-icon {
    position: absolute;
    font-size: 36px; /* 增大动画图标大小 */
    opacity: 0;
    animation: fall2 1.5s linear forwards;
}

@keyframes fall2 {
    0% {
        transform: translateY(-50px) rotate(0deg) scale(0.8); /* 调整初始缩放 */
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        transform: translateY(70vh) rotate(360deg) scale(1.2); /* 调整最大缩放 */
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.8); /* 调整结束缩放 */
        opacity: 0;
    }
}
// 图片表情打call动画-end

    // border:1px solid red;
    .pro-marquee-comments {
        // position: absolute;
        right: 177px;
        bottom: 41px;
        z-index: 103;
        max-width: 436px;
        width: 436px;
        // border:1px solid red;
  
        .pro-top-comments {
          min-height:60px;
          max-height:60px;
        //   max-height:280px;
          overflow: hidden;
          position: relative;
  
          .cmt-wrap {
            transition: .2s all linear;
          }
  
          .item {
            margin-bottom: 10px;
            border-radius: 28px;
            display: flex;
            // padding: 4px 14px 4px 4px;
            justify-content: flex-start;
            position: relative;
            width: max-content;
            align-items: normal;
            cursor: pointer;
  
            .u-img-box {
              min-width: 34px;
              max-width:34px;
              height: 34px;
              border-radius: 34px;
              overflow: hidden;
              margin-right: 11px;
              position: relative;
              z-index: 103;
  
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
  
            .cmt-ri-con {
              .uname {
                margin-bottom: 4px;
                font-size: 10px;
                // color: #CDCDCD;
                color: rgba(255,255,255,0.7);
                font-family: PingFangSC, PingFang SC;
                position: relative;
                z-index:103;
              }
            }
  
            .d-reply {
              color: #11CCB1;
              font-size: 12px;
              position: absolute;
              z-index: 1;
              top: calc((100% - 30px) / 2);
              right: -40px;
              height: max-content;
              // display:none;
              opacity: 0;
            }
  
            .cmt-html {
              font-size: 14px;
              color: #fff;
              position: relative;
              z-index: 103;
              display: flex;
              align-items: center;
              >div {
                // padding-right:50px;
                // max-width: 200px;
                // max-height:300px;
                // overflow: hidden;
              }
  
              .mini-time {
                color: #969696;
                font-size: 12px;
                margin-left: 22px;
                font-style: normal;
              }
            }
          }
  
          &:not(.gd-rows){
            .item{
                width:100%;
              &:hover {
                // padding-right: 50px;
                .d-reply {
                  opacity: 1;
                  // display: inherit;
                }
              }
              .cmt-ri-con{
                position: relative;
                padding:7px 50px 9px 18px;
                max-width:calc(100% - 34px - 11px - 24px);
                &:before {
                  content: '';
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  right: 0px;
                  bottom: 0px;
                  // background: rgba(47, 49, 61, 0.8);
                  background: rgba(47, 49, 61, 0.7);
                  border-radius: 30px;
                }
              }
            }
          }
  
          &.gd-rows{
            overflow:inherit;
            max-height: inherit;
            min-height:128px;
            .item{
              align-items: center;
              .cmt-ri-con{
                border-radius:30px;
                padding:7px 18px 9px 18px;
                height:54px;
                display: flex;
                align-items: center;
                .face-type-r{
                  display: flex;
                  align-items: center;
                  margin-left:5px;
                }
              }
              .uname{
                margin-bottom:0px;
              }
              &:before{
                display: none;
              }
              &.fade-out {
                  animation: fadeOutRight 0.5s forwards;
              }
              .sub-con{
                display: flex;
                align-items: center;
                &.new {
                  animation: slideInFromLeft 0.5s forwards;
                }
                &[data-emo='[call_em_14]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(228,36,82,0.8) 0%, rgba(228,36,82,0) 100%);
                    }
                }
                &[data-emo='[call_em_2]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(228,36,82,0.8) 0%, rgba(228,36,82,0) 100%);
                    }
                }
                &[data-emo='[call_em_5]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(74,209,255,0.8) 0%, rgba(48,207,227,0) 100%);
                    }
                }
                &[data-emo='[call_em_17]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(255,233,85,0.8) 0%, rgba(255,184,75,0) 100%);
                    }
                }
                &[data-emo='[call_em_16]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(36,228,163,0.8) 0%, rgba(63,227,207,0) 100%);
                    }
                }
                &[data-emo='[call_em_20]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(228,99,36,0.8) 0%, rgba(214,104,24,0) 100%);
                    }
                }
                &[data-emo='[call_em_28]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(228,36,82,0.8) 0%, rgba(228,36,82,0) 100%);
                    }
                }
                &[data-emo='[call_em_21]']{
                    .cmt-ri-con{
                        background: linear-gradient( 90deg, rgba(36,228,163,0.8) 0%, rgba(63,227,207,0) 100%);
                    }
                }
              }
            }
  
  
            @keyframes fadeOutRight {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }

            .messages-container {
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 300px;
                height: 90px;
            }
  
            .message-slot {
                // position: absolute;
                // left: 0;
                // right: 0;
                // height: 40px;
            }
  
            .gift-message {
                background: rgba(255, 20, 147, 0.8);
                border-radius: 30px;
                padding: 8px 16px;
                display: flex;
                align-items: center;
                color: white;
                position: absolute;
                left: 0;
                width: fit-content;
            }
  
            @keyframes slideInFromLeft {
                from {
                    transform: translateX(-100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
  
            .content {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
            }
  
            .username {
                font-weight: bold;
            }
  
            .count {
                font-weight: bold;
                font-size: 24px;
                display: inline-flex;
                align-items: center;
                margin-left: 4px;
                font-style: italic;
            }
  
            .call-num.scale {
                animation: scaleCount 0.2s ease-out;
            }
  
            @keyframes scaleCount {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1);
                }
            }
          }
        }
  
        .send-mbox {
          display: flex;
          align-items: center;
          margin-top: 17px;
  
          .u-img {
            min-width: 34px;
            height: 34px;
            border-radius: 34px;
            overflow: hidden;
            margin-right: 12px;
  
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
  
          .right {
            width: 100%;
            min-width:281px;
            position: relative;
            display: flex;
            align-items: center;
  
            input {
            //   background: #1F1B1A;
              width: 100%;
              border: none;
              border: none;
              line-height: 44px;
              padding-left: 16px;
              font-size: 14px;
              color: #fff;
              border-radius: 22px;
              padding-right: 100px;
              border: 1px solid transparent;
              transition: .1s all linear;
  
              &:focus {
                border: 1px solid #11CCB1;
              }
            }
  
            .opbtns {
              position: absolute;
              right: 0px;
              display: flex;
              align-items: center;
  
              .face-btn {
                width: 20px;
                height: 20px;
                background: url('../../assets/pro/top_cmt_face.svg') no-repeat;
                background-size: cover;
                display: flex;
                align-items: center;
                margin-right: 13px;
  
                &:after {
                  content: '';
                  width: 1px;
                  background: #484848;
                  height: 18px;
                  margin: 0px 13px;
                  position: absolute;
                  left: 20px;
                }
  
                &:hover {
                  background: url('../../assets/pro/top_cmt_face_active.svg') no-repeat;
                  background-size: cover;
                }
              }
  
              .send-btn {
                width: 24px;
                height: 24px;
                background: url('../../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                background-size: cover;
                margin-left: 13px;
                margin-right: 15px;
                display: flex;
              }
            }
          }
        }
  
        .small-sys-tip {
          font-size: 12px;
          color: #969696;
          margin-top: 12px;
        }
      }
  
@keyframes scrollComments {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}
#marquee_comments{
    &.cmt-marq{
        // min-height: 280px;
        min-height:60px;
        mask: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
        -webkit-mask: linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );
        .cmt-wrap{
            z-index:1;
            width:100%;
            animation: scrollComments 12s linear infinite;
            position: absolute;
            &:hover{
                animation-play-state: paused;
            }
        }
    }
}
.main-navs{
    display: flex;
    grid-gap:30px;
    margin-right:30px;
    .nav{
        color:#52565A;
        white-space:nowrap;
        line-height:47px;
        font-size:18px;
        &.cur{
            color:#11ccb1;
            font-weight:500;
        }
    }
    .ai-hnav{
        position: relative;
        &:after{
            width:57px;height:17px;
            position: absolute;
            content:'';
            top:-5px;
            left:26px;
            background:url('../../assets/pro/ai_y.svg') no-repeat;
        }
    }
}


.list-wrap-flex {
    display: flex;
    align-items: flex-start;
    padding-right:20px;
    padding-left:20px;
    margin-top:20px;
}
.list-wrap-flex{
    .search-area{
        margin-right:20px;
        display: flex;
        flex-direction: column;
        grid-gap: 13px;
        background-color:#F1F2F4;
        border-radius:16px;
        padding:13px 12px;
        width:330px;
        min-width:330px;
        position: sticky;
        top:84px;
        z-index:1;
        .filter-by{
            width:100%;
            padding:18px 11px;
            padding-top:0px;
            background-color:#fff !important;
            border-radius:10px;
            .cates{
                padding:0px;
            }
        }
        .seach-bx{
            border-radius:44px;
            min-height:44px;
            height: 44px;
            overflow: hidden;
            background-color:#fff !important;
            border:1px solid #F1F2F4;
            
            &.active{
                border:1px solid #11CCB1;
            }
            form{
                display: flex;
                align-items: center;
                overflow: hidden;
                height: 44px;
                min-height:44px;
                background-image: url('../../assets/pro/header/search_icon.svg');
                background-repeat: no-repeat;
                background-position: 14px center;
                background-size: 14px 14px;
                border-radius: 8px;
                padding-left:36px;
            }
            input {
                height: 44px;
                min-height:44px;
                line-height: 44px;
                border: none;
                padding-left:4px;
                color: #191C1E;
                width: 100%;
                font-size: 14px;
                transition: .1s all linear;
                padding-right:34px;
    
                &::-webkit-input-placeholder {
                    color: #969696;
                }
    
                &.active {
                    background-color: #262628;
                }
            }
        }
    }
    .list-data-box{
        width:100%;
    }
}
.list-data-box{
    .fixed-wrap{
        position: sticky;
        top:84px;
        z-index:11;
        background:#FBFCFD;
        padding-bottom:20px;
    }
    .top-filter-area{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        // margin-bottom:22px;
        // height:62px;
        .nums{
            font-size:26px;
            font-weight:500;
            color:#fff;
            display: flex;
            align-items: center;
        }
        .filter{
            display: flex;
            align-items: center;
            grid-gap:14px;
            .mk-cus-ddl{
                height:44px;
                .cur{
                    height:44px;
                    line-height:44px;
                }
            }
            .switch-type-box{
                display: flex;
                align-items: center;
                border: 1px solid #191C1E;
                overflow: hidden;
                border-radius:10px;
                line-height:44px;
                a{
                    background:#F1F2F4;
                    color:#191C1E;
                    min-width:100px;
                    text-align: center;
                    font-weight:500;
                    transition-property:background border-radius;
                    &.active{
                        background-color:#191C1E;
                        color:#fff;
                        // border-radius:10px;
                    }
                }
            }
        }
    }
    .vwrap{
        overflow-x: hidden;
        // margin-top:20px;
        .vue-waterfall{
            // width:101%;
            // margin-left: -1%;
        }
    }
    .selected-filters{
        margin-top:20px;
        // margin-bottom:20px;
        display: flex;
        grid-gap:10px;
        flex-wrap: wrap;
        .q-f-item{
            white-space: nowrap;
            border:1px solid #52565A;
            line-height:44px;
            height:44px;
            border-radius:22px;
            padding:0px 17px;
            padding-right:10px;
            background-color:#fbfcfd !important;
            .it-clr{
                width:22px;
                height:22px;
                background-image:url('../../assets/pro/l_ct_clr.svg');
                background-size:22px;
            }
        }
        .clr-all{
            color:#9A9A9C;
            background-image:url('../../assets/pro/l_filter_clr.svg');
            background-position: left center;
            background-repeat: no-repeat;
            background-size:18px;
            line-height:44px;
            height:44px;
            padding-left:22px;
            &:hover{
                color:#52565A;
            }
        }
    }
}

.floating-number {
    position: absolute;
    color: #fff;
    font-weight: bold;
    pointer-events: none;
    font-size: 16px;
    z-index: 100;
    text-shadow: 
        0 0 6px rgba(249, 18, 93, 0.8),
        0 0 12px rgba(214, 0, 148, 0.6);
    animation: floatUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.face-type-con{
    display: flex;
    align-items: center;
    .face-type-img{
        img{
            width:32px;
        }
    }
    .unit{
        font-size:24px;
        margin-right:5px;
        margin-left:14px;
        font-family: Arial, Arial;
    }
    .call-num{
        font-size:28px;
        font-style: italic;
        // font-weight:500;

        // font-family: BoldItalicMT;
        font-family: Arial Bold Italic,BoldItalicMT;
    }
}
.zbmk{
    position: relative;
    width:100%;
    display: flex;
    .game-n-u-visit{
        left:-232px;
    }
}
// .pro-top-comments{
//     border:1px solid red;
//     &.g-rows{
//         border:1px solid red;
//         .item{
//             background: linear-gradient( 90deg, rgba(228,36,82,0.8) 0%, rgba(228,36,82,0) 100%);
//         }
//     }
// }

.bodyView{
    &.is-publish-sub-page{
        .layout-container{
            padding-left:240px !important;
        }
    }
}

// 收藏动画
.star {
    position: absolute;
    color: gold;
    font-size: clamp(24px, 4vw, 40px);
    will-change: transform;
    user-select: none;
    animation: fallDown 3s linear forwards;
}
@keyframes fallDown {
    0% {
        transform: translateY(-5vh) rotate(0deg) scale(0.8);
        opacity: 1;
    }
    25% {
        transform: translateY(20vh) rotate(90deg) scale(1); 
    }
    50% {
        transform: translateY(45vh) rotate(180deg) scale(1.2);
    }
    75% {
        transform: translateY(70vh) rotate(270deg) scale(1);
    }
    100% {
        transform: translateY(105vh) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}
// 收藏动画

// 打call全屏动画
.confetti {
    position: absolute;
    will-change: transform;
    transform-origin: center;
}

.confetti.strip {
    width: clamp(4px, 1vw, 8px);
    height: clamp(10px, 2.5vw, 20px);
}

.confetti.square {
    width: clamp(6px, 1.2vw, 10px);
    height: clamp(6px, 1.2vw, 10px);
}

.confetti.circle {
    width: clamp(6px, 1.2vw, 10px);
    height: clamp(6px, 1.2vw, 10px);
    border-radius: 50%;
}

.confetti.wave {
    width: clamp(12px, 2.5vw, 20px);
    height: clamp(5px, 1vw, 8px);
    clip-path: path('M0,4 Q5,0 10,4 Q15,8 20,4');
}

.confetti.star {
    width: clamp(10px, 2vw, 15px);
    height: clamp(10px, 2vw, 15px);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes fall {
    0% {
        transform: translate(var(--init-x), -2vh) rotate(0deg);
        opacity: 1;
    }
    20% {
        opacity: 0.9;
    }
    50% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.5;
    }
    100% {
        transform: translate(var(--final-x), calc(100vh + 2vh)) rotate(var(--rotation));
        opacity: 0;
    }
}
// 打call全屏动画

// 点赞全屏动画
.heart {
    position: absolute;
    color: #11CCB1;
    font-size: clamp(12px, 2vw, 20px);
    will-change: transform;
    user-select: none;
    z-index:111;
    animation: fallDown 3s linear forwards;
}
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index:111;
}
//点赞全屏动画

.text-mask{
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background:#000;
    z-index:10;
    opacity:0;
}
.img-text-wrap{
    top:55px;
    // top:64px;
    position: absolute;
    background:#111;
    z-index:11;
    // padding-top:10px;
    height:0px;
    transition: height 0.3s ease-in-out;
    
}
.img-texts{
    width:100%;
    background: #23232A;
    box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.3);
    border-radius: 16px;
    top:55px;
    // top:64px;
    position: absolute;
    z-index:11;
    // padding-top:10px;
    height:0px;
    transition: height 0.3s ease-in-out;
    
    .img-text-tip{
        font-size: 14px;
        color: #969696;
        line-height: 20px;
        margin-bottom:15px;
        display: none;
        align-items: center;
        justify-content: space-between;
        .ocr-win-close{
            width:18px;height:18px;
            background:url('../../assets/pro/ocr_text_close.svg') no-repeat;
            background-size:cover;
            transition:.2s all linear;
            &:hover{
                transform: rotate(180deg);
            }
        }
    }
    .img-text-items{
        display: flex;
        grid-gap:20px;
        flex-wrap: wrap;
        padding-right:20px;
        overflow-y:auto;
        max-height:calc(100% - 22px - 15px);
        .text{
            width:calc((100% - 100px) / 6);
            background:#37363E;
            white-space: nowrap;
            overflow: hidden;
            line-height:30px;
            height:30px;
            border-radius:15px;
            text-overflow: ellipsis;
            padding:0px 13px;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s ease;
            &:hover{
                background:#555561;
            }
        }
    }
    &.active{
        height:478px;
        padding:20px 26px;
        .img-text-tip{
            display: flex;
        }
        .img-text-items{
            .text{
                transform: translateY(0);
                opacity: 1;
                &:nth-child(6n+1){
                    transition-delay: 0.1s;
                }
                &:nth-child(6n+2){
                    transition-delay: 0.15s;
                }
                &:nth-child(6n+3){
                    transition-delay: 0.2s;
                }
                &:nth-child(6n+4){
                    transition-delay: 0.25s;
                }
                &:nth-child(6n+5){
                    transition-delay: 0.3s;
                }
                &:nth-child(6n+6){
                    transition-delay: 0.35s;
                }
            }
        }
    }
}
.single-call-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    min-width: 50px;
    height: 50px;
    margin-left:10px;
    position: relative;
    cursor: pointer;
    text-align: center;
    animation: ring 1.2s ease-in-out infinite;
    background:url('../../assets/pro/gameInfoRightBar/call.png') no-repeat;
    // background-size: 50px 50px;
    // &:before{
    //     content: '';
    //     background:url('../../assets/pro/gameInfoRightBar/call.png') no-repeat;
    //     background-size: cover;
    //     width: 50px;
    //     height: 50px;
    //     display: block;
    //     position: absolute;
    //     transition: 0.2s all linear;
    //     top: -10px;
    // }
    .text{
        font-style: normal;
        font-size: 12px;
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: -28px;
    }
    .num{
        background: #232323;
        line-height: 17px;
        border-radius: 9px;
        border: 1px solid #010101;
        padding: 0px 2px;
        font-size: 12px;
        position: absolute;
        top: 0px;
        right: -5px;
        min-width: 19px;
        font-style: normal;

        background: linear-gradient(317deg, #FF58CE 0%, #11CCB1 100%);
        border-color: #fff;
    }
    @keyframes ring {
        0% {
            transform: rotate(0deg);
        }
        1% {
            transform: rotate(-3deg);
        }
        3% {
            transform: rotate(3deg);
        }
        5% {
            transform: rotate(-4deg);
        }
        7% {
            transform: rotate(4deg);
        }
        9% {
            transform: rotate(-3deg);
        }
        11% {
            transform: rotate(3deg);
        }
        13% {
            transform: rotate(-2deg);
        }
        15% {
            transform: rotate(2deg);
        }
        17% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
    @keyframes glow {
        0%, 20% {
            opacity: 0.5;
            transform: scale(1.05);
        }
        50% {
            opacity: 0.3;
            transform: scale(1);
        }
        100% {
            opacity: 0.5;
            transform: scale(1.05);
        }
    }
    &:before{
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        background: radial-gradient(circle, rgba(255, 111, 156, 0.4) 0%, rgba(255, 51, 102, 0) 70%);
        border-radius: 50%;
        z-index:-1;
        animation: glow 1s ease-in-out infinite;
    }
}

/* 科幻边框 - 外圈 */
.tech-border-outer {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    animation: rotate 8s linear infinite;
    overflow: hidden;
}

.tech-border-outer::before,
.tech-border-outer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 1px solid rgba(255,111,156,0.8);
    transform-origin: center;
}

.tech-border-outer::before {
    transform: rotate(0deg);
}

.tech-border-outer::after {
    transform: rotate(180deg);
}

/* 科幻边框 - 内圈 */
.tech-border-inner {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    animation: rotate 8s linear infinite reverse;
    overflow: hidden;
}

.tech-border-inner::before,
.tech-border-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 1px solid rgba(255,111,156,0.6);
    transform-origin: center;
}

.tech-border-inner::before {
    transform: rotate(0deg);
}

.tech-border-inner::after {
    transform: rotate(180deg);
}

/* 脉冲光环 */
.pulse-ring {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255,111,156,0.1) 0%, 
        rgba(255,111,156,0.2) 40%,
        rgba(255,111,156,0.3) 50%,
        rgba(255,111,156,0.2) 60%,
        rgba(255,111,156,0) 70%
    );
    animation: pulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
}
.call-box{
    display: flex;
    align-items:center;
    justify-content: space-between;
    .left-persons{
        display: flex;
        align-items: center;
        width:100%;
        height:34px;
        .person{
            display: flex;
            align-items: center;
            position: relative;
            height:34px;
            width:30%;
            a{
                border: 1px solid #FFFFFF;
                width:34px;height:34px;
                border-radius:17px;
                overflow: hidden;
                position: absolute;
                background:#fff;
                img{
                    border-radius:17px;
                    width:100%;
                    height:100%;
                    object-fit:cover;
                }
                &:nth-child(2){
                    left:22px;
                }
                &:nth-child(3){
                    left:44px;
                }
                &:nth-child(4){
                    left:66px;
                }
                &:nth-child(5){
                    left:88px;
                }
                &:nth-child(6){
                    left:110px;
                }
                &.last-more{
                    background:url('../../assets/pro/call_more_user.svg') no-repeat;
                    left:132px;
                }
            }
        }
        .call-mini-tip{
            font-size:16px;
            margin-left:19px;
        }
    }
    .call-btn{
        border-radius:19px;
        background-color:#fff;
        height:38px;
        min-width:89px;
        cursor: pointer;
        line-height:38px;
        display: flex;
        align-items: center;
        font-size:16px;
        color:#FF4974;
        font-weight:500;
        &:before{
            content:'';
            width:32px;
            height:32px;
            background-image:url('../../assets/pro/gameInfoRightBar/call.png');
            background-position:2px center;
            background-repeat:no-repeat;
            background-size:32px;
            margin-right:4px;
        }
    }
}
.top-call{
    background-image:url('../../assets/pro/gameInfoRightBar/call.png');
    width:44px;height:44px;
    background-size:cover;
    min-width:44px;
    margin-left:26px;
}
.call-types{
    display: flex;
    align-items: center;
    grid-gap:10px;
    margin-bottom:30px;
    margin-top:30px;
    .call-type{
        background:#242327;
        line-height:40px;
        height:40px;
        border-radius:20px;
        min-width:56px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding:0px 16px;
        transition:background .2s linear;
        i{
            font-style: normal;
            margin-left:10px;
            font-size:18px;
            font-weight:500;
        }
        &:before{
            content:'';
            width:27px;
            height:27px;
        }
        &:hover{
            background:#323232;
        }
    }
    .call-type-1{
        &:before{
            background:url('http://www.gameui.net/emoji/5.svg') no-repeat;
            background-size:27px;
        }
    }
    .call-type-2{
        &:before{
            background:url('http://www.gameui.net/emoji/17.svg') no-repeat;
            background-size:27px;
        }
    }
    .call-type-3{
        &:before{
            background:url('http://www.gameui.net/emoji/16.svg') no-repeat;
            background-size:27px;
        }
    }
    .call-type-4{
        &:before{
            background:url('http://www.gameui.net/emoji/20.svg') no-repeat;
            background-size:27px;
        }
    }
    .call-type-5{
        &:before{
            background:url('http://www.gameui.net/emoji/28.svg') no-repeat;
            background-size:27px;
        }
    }
}
.game-page .panel-tit .funs,
.work-page .panel-tit .funs {

    .put-tag,
    .img-move-to,
    .del-img {
        transition: .1s all linear;

        &:hover {
            background-color: #0fab94;
        }
    }
}

@keyframes explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes ringExpand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes elasticPop {
    0% { 
        transform: scale(1); 
    }
    25% { 
        transform: scale(0.8); 
    }
    50% { 
        transform: scale(1.3); 
    }
    75% { 
        transform: scale(0.9); 
    }
    85% { 
        transform: scale(1.1); 
    }
    92% { 
        transform: scale(0.95); 
    }
    100% { 
        transform: scale(1); 
    }
}

@keyframes floatUp {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -70%) scale(1.2);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -90%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -120%) scale(0.8);
        opacity: 0;
    }
}

.heart-bounce {
    animation: elasticPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.like-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #11CCB1;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.particle {
    position: absolute;
    pointer-events: none;
    background: #11CCB1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ring {
    position: absolute;
    border: 2px solid #11CCB1;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1);
}

.plus-one {
    position: absolute;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    text-shadow: 
        2px 2px 0 #ff2d55,
        -1px -1px 0 #ff2d55,
        1px -1px 0 #ff2d55,
        -1px 1px 0 #ff2d55,
        1px 1px 0 #ff2d55;
}
@keyframes moveUpDown2{
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }

    to {
        transform: translateY(0)
    }
}
.scroll-tip-area{
    display: block;
    margin:0 auto;
    width:max-content;
    color:#969696;
    background:url('../../assets/pro/down.svg') no-repeat;
    background-position:bottom center;
    padding-bottom: 24px;
    margin-top:20px;
    animation: moveUpDown2 2s infinite;
    transition:.1s all linear;
}
.dm-btns{
    display: flex;
    line-height:44px;
    align-items: center;
    margin-left:20px;
    background-color: #292929;
    border-radius:22px;
    padding-right:15px;
    .el-popover__reference-wrapper{
        display: flex;
    }
    a{
        min-width:55px;
        height:44px;
        transition:.1s all linear;
        white-space: nowrap;
        &:first-child{
            background:url('../../assets/pro/dm_cls.svg') no-repeat;
            background-position:center center;
        }
        &.active{
            background:url('../../assets/pro/dm_op.svg') no-repeat;
            background-position:center center;
        }
    }
    .view-dm-win{
        color:#969696;
    }
}
.sp-container{
    z-index:111 !important;
    background:#23232A;
    border-color:#23232A;
    max-width:208px;
    padding:20px;
    .sp-hue{
        bottom:3px;
        top:inherit;
    }
    .sp-dragger{
        left:-1px;
        bottom:-1px;
    }
    .sp-slider{
        box-shadow: none;
    }
    .sp-top{
        overflow: hidden;
    }
    .sp-top-inner{
        height:inherit;
        bottom:3px;
    }
    .sp-cf:after,.sp-cf:before{
        display: none;
    }
    .sp-palette>div{
        grid-gap:15px;
    }
    .sp-input-container{
        display: flex;
        align-items: center;
        margin-top:9px;
    }
    .sp-input{
        background:#0B0B0E;
        color:#fff;
        border-color:#0B0B0E;
        height:26px;
        font-size:10px;
        width:125px;
        border-radius:2px;
        padding:5px 6px;
    }
    .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active{
        background:none;
    }
    .default-view-color{
        width:26px;height:26px;
        min-width:26px;
        border-radius:3px;
    }
    .sp-palette .sp-thumb-el{
        width:30px;height:30px;border:none;
        border-radius:15px;
        margin:0px;
        &:hover{
            background:inherit;
            span{
                margin:0px;
            }
        }
    }
    .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner,.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{
        margin:0px;
        background-image: url('../../assets/pro/clr_active.svg');
    }
    .sp-button-container{
        margin-top:20px;
        display: flex;
        align-items: center;
        .sp-choose{
            // display: none;
        }
        .sp-cancel{
            // width:100%;
            // height:37px;
            // line-height:37px;
            background:#37353E;
            border-radius:8px;
            color:#fff;
            border:none;
            // font-size:14px;
            transition:.1s all linear;
            &:hover{
                background:#323232;
            }
        }
        .sp-choose{
            background:#11CCB1;
            &:hover{
                background:#0fab94;
            }
        }
    }
}



.particle {
    position: absolute;
    pointer-events: none;
    background: #ff6b9c;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
.floating-count {
    position: absolute;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    white-space: nowrap;
  }
.ft-visit{
    position: absolute;
    top:0px;
    z-index:104;
    left:0px;
    right:0px;
    bottom:0px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: saturate(180%) blur(16px);
    text-align: center;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    .text{
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        &:before{
            content:'';
            width:94px;
            height:70px;
            background:url('../../assets/pro/shubiao.svg') no-repeat;
            background-size:cover;
        }
    }
    .i-know{
        background:#11CCB1;
        line-height:36px;
        border-radius:18px;
        width:102px;
        color:#fff;
        transition:.1s all linear;
        margin-top:19px;
        &:hover{
            background:#0fab94;
        }
    }
}
.job-menu-items{
    display: flex;
    flex-direction:column;
    grid-gap:10px;
    a{
        text-align: center;
        line-height:40px;
        font-size:14px;
        color:#fff;
        background:#242327;
        &:hover{
            color:#11CCB1;
            background:#3D3C40;
        }
        i{
            font-size:18px;
            margin-right:5px;
        }
    }
}

.op-fun{
    position: absolute;
    right:20px;
    top:40px;
    i{
        font-size:18px;
        color:#9d9b9b;
        font-weight:normal;
        width:30px;
        text-align: center;
        line-height:30px;
    }
}

.pro-bot-loading{
    margin-top:20px;
    height:50px;
    text-align: center;
    display: flex;
    align-items:center;
    justify-content: center;
    i{
      font-size:28px;
      font-weight:500;
      color:#9f9f9f !important;
    }
  }
.xkj-sou-pop{
padding:0px;
// width:210px;
border-radius:12px;
}
.xj-search-desc{
    padding:14px;
    font-size:12px;
    line-height:17px;
    .sub-desc{
        font-size:12px;
        color:#11CCB1;
        margin-bottom:4px;
    }
    .sub-d{
        color:#969696;
    }
}
.no-flex{
    display:inherit !important;
}
.u-m-tag{
    width:22px !important;
    margin:0px 3px;
}
.game-img-workbox .single-upload-btn:hover,.game-page .bot-single-upload-area:hover,.work-page .bot-single-upload-area:hover,.publish-article-page .basic-box .upload-btn:hover,.work-page .basic-box .upload-btn:hover,.game-page .basic-box .upload-btn:hover,.game-page .basic-box .upload-videos .upload-video-btn:hover,
.work-page .basic-box .upload-video-btn:hover{
    border-color:#11CCB1;
}
.el-popover{
    &.cmt-bot-face{
       padding:0px;
       border-radius:16px;
    }
}
.vue-danmaku{
    position: absolute !important;
    width:100%;
    height:200px;
    top:0px;
    .danmus{
        .dm{
            z-index:103;
            font-size:16px;
            line-height:30px;
            text-shadow:1px 0 1px #000000,0 1px 1px #000000,0 -1px 1px #000000,-1px 0 1px #000000;
            // text-shadow: 0px 3px 0 #000;
            font-weight:bold;
            img{
                width:30px;
            }
        }
    }
}
.game-page .center-info .search-bx{
    >form>span{
        // width:100%;
    }
}
.custom-empty{
    color:#969696;
    span{
        display: block;
    }
    .btns{
        display: flex;line-height: 44px;
        margin-top:20px;
        grid-gap:20px;
        a{
            text-align: center;
            color: #fff;
            border-radius: 6px;
            padding: 0px 44px;
            transition:.1s all linear;
            &:first-child{
                background: #3D3D3D;
                &:hover{
                    background:#2d2c2c;
                }
            }
            &:last-child{
                background: #11CCB1;
                &:hover{
                    background:#0fab94;
                }
            }
        }
    }
}
.game-list-page,
.games-page {
    .games-data {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-gap: 20px;
        .gd-item {
            &.no-data{
                background:#1D1D1F;
            }
            .mimg-box{
                border-radius:12px;
                overflow: hidden;
                // min-height:30%;
                // height:269px;
                img{
                    // height:100%;
                    // width:100%;object-fit:cover;
                }
            }
            // background:#181818;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
            // margin-right: 20px;
            // margin-bottom: 20px;
            transition:.1s all linear;
            // transition:.2s all linear;
            animation: opacity .5s linear;

            // border:2px solid #111;
            min-height:249px;
            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border-color:#11CCB1;
                cursor: pointer;

                .mimg-box {
                    >img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;

                    transition: 0.1s all linear;
                }
            }
            .rt{
                display: flex;
            }

            a>img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .right-icos {
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        // margin-right:10px;
                    }
                }
            }

            .basic-info {
                // position: absolute;
                bottom: 10px;
                padding:9px 10px 10px 10px;
                left: 10px;
                z-index: 1;
                color: #fff;
                right:10px;
                .title {
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 3px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .bot-desc {
                    font-size: 12px;
                    color: #969696;
                    display: flex;
                    align-items: center;
                    margin-top:8px;
                    white-space: nowrap;
                    .pnum {
                        background: url('../../assets/pro/icon_pic.svg') no-repeat;
                        background-position: left center;
                        padding-left: 16px;
                    }
                    .u-img{
                        width:20px;
                        height:20px;
                        max-width:20px;
                        border-radius:20px;
                        object-fit: cover;
                        margin-right:8px;
                    }
                    .uname {
                        // margin-left: 32px;
                        // background: url('../../assets/pro/icon_user.svg') no-repeat;
                        // background-position: left center;
                        // padding-left: 16px;
                        display: flex;
                        align-items: center;
                        width:100%;
                        .name-text{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .znum {
                        font-size: 12px;
                        background: url('../../assets/pro/icon_like2.svg') no-repeat;
                        padding-left: 26px;
                        background-position: left center;
                        line-height: 20px;
                    }
                    
                    .vnum {
                        font-size: 12px;
                        background: url('../../assets/pro/l_vnum.svg') no-repeat;
                        padding-left: 20px;
                        background-position: left center;
                        // color: #fff;
                        line-height: 20px;
                        margin-left:20px;
                    }
                }
            }

            .con-mask {
                height: 129px;
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
            }
        }

        &.small {
            .gd-item {
                width: calc((100% - 120px) / 7);
                height: 216px;
            }
        }

        &.small.show-filter {
            .gd-item {
                // width: calc((100% - 100px) / 6);
            }
        }

        &.big {
            .gd-item {
                width:calc((100% - 80px) / 5);
                // height:262px;
                &:nth-child(5n) {
                    margin-right: 0px !important;
                }
            }
        }
    }
}
.web-data-error {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 241px;

    .tip-text {
        text-align: center;

        &:before {
            background: url('../../assets/pro/data_error.svg') no-repeat;
            background-size: cover;
            content: '';
            width: 300px;
            height: 180px;
            display: block;
            margin-bottom: 21px;
        }
    }

    .options {
        margin-top: 29px;
        display: flex;
        grid-gap: 30px;
        line-height: 44px;
        font-size: 16px;

        a {
            transition: .1s all linear;
        }

        .go-back {
            background: #3D3D3D;
            color: #fff;
            border-radius: 6px;
            padding: 0px 44px;
        }

        .click-refresh {
            background: #11CCB1;
            color: #fff;
            border-radius: 6px;
            padding: 0px 44px;

            &:hover {
                background: #ab2646;
            }
        }
    }
}

.web-404-error {
    // height:100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 243px;

    .tip-text {
        text-align: center;

        &:before {
            background: url('../../assets/pro/post_error.svg') no-repeat;
            background-size: cover;
            content: '';
            width: 300px;
            height: 180px;
            display: block;
            margin-bottom: 21px;
        }
    }

    .options {
        margin-top: 29px;
        display: flex;
        grid-gap: 30px;
        line-height: 44px;
        font-size: 16px;

        a {
            transition: .1s all linear;
        }

        .go-back {
            background: #3D3D3D;
            color: #fff;
            border-radius: 6px;
            padding: 0px 44px;
        }

        .click-refresh {
            background: #11CCB1;
            color: #fff;
            border-radius: 6px;
            padding: 0px 44px;

            &:hover {
                background: #ab2646;
            }
        }
    }
}

.pro-header .glb-up-file-input {
    position: absolute;
    top: 11px;
    right: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100% !important;
    // background-color:transparent !important;
    border: 1px solid red !important;
    z-index: 1;
    opacity: 0;
}

.uhome > .user .l-basic .basic .addr{
    .el-popover__reference-wrapper{
        display: flex;
    }
}

.ant-message-success .anticon,
.ant-message-warning .anticon,
.ant-message-error .anticon {
    color: #fff;
}

.ant-message-notice-content {
    background: #11CCB1;
    color: #fff;
    font-size: 14px;
    min-height: 60px;
    padding: 20px 28px;
    border-radius: 16px;
    max-width: 300px;
    word-break: break-all;
}

.confirm-mask .confirm-win .btns .cancel {
    transition: .1s all linear;

    &:hover {
        background-color: #0fab94;
    }
}

.label-filter {
    .el-popover__reference-wrapper {
        display: flex;
        align-items: center;
    }
}

#nprogress .bar {
    background: #11CCB1 !important;
}

#nprogress .spinner-icon {
    border-color: #11CCB1 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px #11CCB1, 0 0 5px #11CCB1;
}

.no-more-text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #969696;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-align: center;
    margin-top: 55px;
    width: 100%;
}

.pro-title-tag {
    width: 28px;
    margin-left: 12px;
}

.el-popper {
    z-index: 112010 !important;
}

.hot-row {
    li {
        &:hover {
            .img-box {
                border: 2px solid @hover-brder;
            }
        }
    }
}

.left-icos,
.data-box-wrap {
    .el-popover__reference-wrapper {
        display: flex;
        align-items: center;
    }
}

.batch-mgr-btn,.select-all{
    transition:.1s all linear;
    &:hover{
        background:#23232A !important;
    }
}


/deep/ .el-radio__original {
    display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
}

/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}

/deep/ input[aria-hidden="true"] {
    display: none !important;
}
 
/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}

.work-page .recommend-tag-box .tags .tag,.publish-article-page .recommend-tag-box .tags .tag{
    transition:.1s all linear;
    &:not(.active):hover{
        background:#3D3C40;
    }
    &.active:hover{
        background:#0fab94;
    }
}
.set-tag-modal-con .tj-tags .tags span{
    transition:.1s all linear;
    &:hover{
        background:#4e4d57;
    }
}

.import-video-btn{
    transition:.1s all linear;
    &:hover{
        background:#23232A !important;
    }
}
.pro-import-area .pro-import-video-box .btns .cancel:hover{
    transition:.1s all linear;
    &:hover{
        background:#313038 !important;
    }
}
.pro-import-area .pro-import-video-box .btns .add:hover{
    background:#0fab94;
}

.pro-tag-rig-icons {
    top: 0px !important;
    right: 15px !important;

    .pro-new-tag {
        width: 28px;
        height: 42px;
    }
}

.center-b-area {
    .b-a-left {
        .ba-datas {
            .bdl-data-item {
                transition: none;

                &:hover {
                    border: 2px solid @hover-brder;
                }
            }
        }
    }
}

.games-page {
    .top-games {
        li {
            transition: none;

            &:hover {
                border-color:@hover-brder;
            }
        }
    }
}

.works-page {
    .wp-content-lft {
        .work-datas {
            .wk-d-item {
                border: 2px solid transparent;

                &:hover {
                    border-color:@hover-brder;
                }
            }
        }
    }
}
.game-n-u-visit{
    position: absolute;
    left:-254px;
    top:-5px;z-index:105;
    display: flex;
    .nv-content{
        background:#11CCB1;
        color:#fff;
        display:flex;
        padding:8px 15px;
        border-radius:12px;
        font-size:12px;
        line-height:22px;
        font-weight:500;
        min-width:230px;
        align-items: center;
        justify-content:space-between;
        .nv-content-l{
            display: flex;
            flex-direction:column;
            .big-t{
                font-size:20px;
                margin-bottom:9px;
            }
        }
        .n-u-v-close{
            width:18px;height:18px;
            background:url('../../assets/pro/n_visit/v_close.svg') no-repeat;
        }
    }
    &:before{
        content:'';
        width:27.47px;
        height:18.42px;
        background:url('../../assets/pro/n_visit/xin_n_s.svg') no-repeat;
        position: absolute;
        left:-10px;
        top:-18.42px;
    }
    &:after{
        content:'';
        width:28px;
        height:11px;
        background:url('../../assets/pro/n_visit/xin_s.svg') no-repeat;
        position: absolute;
        right:-28px;
        top:20px;
    }
    @keyframes cursorMove2 {
        0% {
            transform: translateY(0)
        }
    
        50% {
            transform: translateY(30px)
        }
    
        to {
            transform: translateY(0)
        }
    }
    .cursor{
        width:90px;height:90px;
        background:url('../../assets/pro/n_visit/cursor_h.webp') no-repeat;
        background-size:73px 79px;
        background-position:center center;
        position: absolute;
        bottom:-65px;
        left:250px;
        z-index:1;
        animation:cursorMove2 1s ease-in-out infinite;
    }
    &.top-gm-uv{
        left:inherit;
        right:18px;
        top:74px;
        .nv-content{
            width:319px;
            padding:19px 21px;
            .n-u-v-close{
                margin-top:-45px;
            }
        }
        &:after{
            top:-24px;
            right:0px;
            transform: rotate(-90deg);
        }
        @keyframes cursorMove {
            0% {
                transform: translateX(0)
            }
        
            50% {
                transform: translateX(30px)
            }
        
            to {
                transform: translateX(0)
            }
        }
        @keyframes topcursorMove {
            0% {
                transform: translateX(0) rotate(90deg);
            }
        
            50% {
                transform: translateX(30px) rotate(90deg);
            }
        
            to {
                transform: translateX(0) rotate(90deg);
            }
        }
        .cursor{
            background:url('../../assets/pro/n_visit/cursor_h.webp') no-repeat;
            background-size:73px 79px;
            background-position:center center;
            left:inherit;
            right:60px;
            bottom: 108px;
            animation: none;
            transform: rotate(90deg);
            animation:topcursorMove 1s ease-in-out infinite;
        }
        .top-cbox{
            background: none;
            border:1px solid #11CCB1;
            width:44px;
            height:44px;
            top:-70px;
            border-radius:22px;
            left: inherit;
            right: -6px;
            position: absolute;
        }
    }
    .ques-box{
        width:34px;height:34px;
        border-radius:8px;
        border:1px solid #11CCB1;
        position: absolute;
        right:-58px;
        top:3px;
    }
    &.img-nu-visit{
        left:inherit;
        // right:53px;
        right:9px;
        top:71px;
        &:after{
            transform: rotate(-90deg);
            top:-22px;
            right:22px;
        }
        .cursor{
            background: none;
            animation: none;
            width: 76px;
            height: 48px;
            border: 1px solid #11CCB1;
            border-radius: 8px;
            top: -73px;
            left: inherit;
            right: -1px;
            cursor: pointer;
        }
    }
    &.work-p{
        left:75px;
        top:-63px;
        &:after{
            top:67px;
            right:100px;
            transform: rotate(90deg);
        }
        .box{
            width: 288px;
            border: 1px solid #11CCB1;
            height: 43px;
            position: absolute;
            bottom: -70px;
            right: -40px;
            border-radius:8px;
        }
    }
}

.article-page {
    .wp-content-lft {
        .work-datas {
            .wk-d-item {
                border: 2px solid transparent;

                &:hover {
                    border-color:@hover-brder;
                }
            }
        }
    }
}

.game-page .game-top .basic .game-desc{
    * {
        color: #EAEAEA  !important;
    }
}

.work .right-con-box .sub-desc {
    * {
        color: #bbb !important;
        background: #171717 !important;
    }
}

.q-f-item-wrap {
    position: relative;
    border-radius: 8px;
    min-width: max-content;
    background-image: url('../../assets/pro/header/search_icon.svg');
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    padding-left:36px;

    .cancel-search {
        background: url('../../assets/pro/cancel_search.svg');
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    input {
        border-radius: 0px;
        min-width: 300px;
    }
}

.mb4 {
    margin-bottom: 4px;
}

.seach-bx {
    background: #1C1C1E;
    border-radius: 8px;

    form {
        position: relative;

        .cancel-search {
            background: url('../../assets/pro/cancel_search.svg');
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    }
}

.n-c-n-item-bot .b-find-btn{
    color:#11CCB1;
    background:url('../../assets/nine/go_arrow_right.png') no-repeat;
    background-size:11px 10px;
    background-position: 100% 9px;
    padding-right:20px;
    line-height:17px;
    font-size:18px;
}
.n-c-n-item-bot .b-find-btn:hover{
    opacity:.7;
}
// .bodyView{
    html.light{
        background:#FBFCFD;
        .pic-to-pic-win-control{
            background:#FBFCFD;
        }
        .web-data-error .tip-text{
            color:#191C1E;
        }
        .them-area{
            background-image:url('../../assets/pro/them_light.svg');
            background-repeat: no-repeat;
            background-size:24px;
            background-position:center;
        }
        .n-work-filter-area .desc{
            color:#191C1E;
        }
        .global-keyword-searchs .searchs-item{
            color:#191C1E;
        }
        .rank-page .rank-l .content-list-area .item .ops .collect{
            background-color:#11CCB1;
        }
        .n-h-hot-games li .tit,.nine-home-search .search-by-pic{
            color:#191C1E;
        }
        .nine-home-covers li.empty a{
            color:#191C1E;
        }
        .comp-article-page .article-top .u-row .funs .follow-to.active{
            color:#191C1E;
        }
        .rank-page .list-box .list-item .follow-btn{
            background-color:#11CCB1;
            &.active{
                background-color:#9A9A9C;
            }
        }
        .hot-gx-data .item{
            .at-btn{
                background-color:#11CCB1;
                &.active{
                    background-color:#9A9A9C;
                }
            }
        }
        .manage-page .manage-data-box .empty-data-tip .abs-con .tip{
            color:#52565A;
        }
        .game-page .game-top .basic .user .follow{
            background:none;
            color:#52565A;
            border-color:#52565A;
        }
        .game-page .game-desc *{
            color:#191C1E !important;
            line-height:32px;
        }
        .filter-by .cates .sub-cates .view-btn a{
            color:#52565A;
        }
        .filter-by .sub-cates li .text{
            color:#2C3034;
        }
        .pro-marquee-comments .pro-top-comments.gd-rows .item .cmt-ri-con{
            .face-ri-l{
                color:#191C1E;
            }
        }
        .following-page .users .user-item{
            background-color:#F1F2F4;
            .name{
                color:#191C1E;
            }
            .nums{
                color:#52565A;
            }
        }
        .n-h-s-type-nav{
            background-color:#F1F2F4;
            color:#191C1E;
        }
        .nine-home-search input{
            color:#191C1E;
        }
        .un-login-tip-mask:before{
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #FBFCFD 100%);
        }
        .un-login-tip-mask .unlogin-tip-con{
            a{
                color:#191C1E;
            }
        }
        .fav-component .fav-header .close-win:hover{
            background-image: url('../../assets/pro/close_default.svg');
        }
        .face-type-con .unit,.face-type-con .call-num{
            color:#191C1E;
        }
        .n-yjdialog-modal .n-yj-form .form-field .el-radio__input.is-checked .el-radio__inner{
            background-color:#fff;
            border-color:#191C1E;
        }
        .n-yjdialog-modal .n-yj-form .form-field .el-radio__input.is-checked + .el-radio__label{
            color:#191C1E;
        }
        .web-404-error .tip-text:before{
            background-image:url('../../assets/pro/l_post_error.svg');
        }
        .search-page .gp-filter .bs-g-flabel .games-filter .games-filter-wrap{
            background-color:#fff;
        }
        .search-page .gp-filter .bs-g-flabel .games-filter .games-filter-wrap .filter-g-tab{
            color:#191C1E;
        }
        .fav-component .edit-pic-con .left-img{
            background-color:#F1F2F4;
        }
        .search-page .gp-filter .bs-g-flabel .games-filter .games-filter-wrap .gft-data-box .data-ul li{
            a{
                &:not(.active){
                    background-color:#F1F2F4;
                    color:#52565A;
                }
            }
        }
        .fav-component .folder-con .search-bx form,.fav-component .edit-pic-con .rig-con .search-bx form{
            background-color:#F1F2F4;
            input{
                color:#191C1E;
                background-color:#F1F2F4;
            }
        }
        .fav-component .create-form{
            textarea,input{
                color:#191C1E;
                background-color:#F1F2F4;
            }
        }
        .fav-component .folder-con .folder-item,.fav-component .edit-pic-con .rig-con .folder-item{
            background-color:#F1F2F4;
            border-color:#F1F2F4;
        }
        .private-letter-modal .prv-rt-modalcon .sys-notice-data li .collapse-area{
            border-color:#ddd;
        }
        
        .bs-g-flabel .games-filter .games-filter-wrap{
            background:#FBFCFD;
        }
        .cover-win-box{
            background:#FBFCFD;
        }
        .confirm-mask .confirm-win .title{
            color:#191C1E;
        }
        .confirm-mask .confirm-win .msg{
            color:#191C1E;
        }
        .confirm-mask .confirm-win{
            background:#fff;
        }
        .img-list-page .top .left .back-tit .back,.game-list-page .top .left .back-tit .back{
            background-image:url('../../assets/pro/l_common_ddl_arrow.svg');
            background-size:14px 14px;
            transform:rotate(90deg);
        }
        .mk-cus-ddl .cur{
            .clear-btn{
                background-image:url('../../assets/pro/l_cancel_search.svg');
            }
        }
        .manage-page .manage-data-box .total .filter-bx .seach-bx .clear-by-search,
        .game-page .center-info .search-bx form .cancel-search,
        .img-list-page .sub-row .right .seach-bx .clear-by-search,
        .uhome .topbar .t-box .seach-bx .clear-by-search,
        .game-list-page .sub-row .right .seach-bx .clear-by-search,
        .pro-header .search-bx .cancel-search,
        .seach-bx form .cancel-search,
        .collections-page .fav-tab .seach-bx .clear-by-search,
        .my-likes-page .mk-filter-row .filter-bx .seach-bx .clear-by-search,
        .q-f-item-wrap .cancel-search,
        .recruit-page .recruit-page-conbox .filter .search-bx .cancel-search{
            background-image:url('../../assets/pro/l_cancel_search.svg');
        }
        .bs-g-flabel{
            background-image:url('../../assets/pro/l_mg_filter_icon.svg');
        }
        .sp-container{
            background:#fff;
            box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.3);
            border-color:#fff;
        }
        .sp-container .sp-input{
            background-color:#F1F2F4;
            border-color:#F1F2F4;
            color:#191C1E;
        }
        .sp-container .sp-palette .sp-thumb-el{
            border-color:#E9E9E9;
            border-width:1px;
            border-style: solid;
        }
        .notice-modal .notice-header{
            background-color:#fff;
        }
        .notice-data-wrap{
            background-color:#F9F9F9;
            .notice-datas{
                li{
                    border-bottom:1px solid #ddd;
                    padding-bottom:20px;
                    .lt .word-basic .name{
                        color:#191C1E;
                    }
                    .lt .word-basic .desc{
                        color:#52565A;
                        *{
                            background-color:#F9F9F9 !important;
                            color:#52565A !important;
                        }
                    }
                }
            }
        }
        .notice-modal .notice-header .notice-tab{
            a{
                color:#52565A;
                &.active{
                    color:#191C1E;
                }
            }
        }
        .game-page .panel-tit .batch-mgr-btn,
        .fav-component .btns .pro-default-btn,
        .confirm-mask .confirm-win .btns .confirm,
        .uhome > .user .attention-to.active,
        .publish-article-page .footer-fun-bar .draft,
        .publish-article-page .footer-fun-bar .preview,
        .fans-page .pro-page-layout .el-pagination .btn-next, .fans-page .pro-page-layout .el-pagination .btn-prev,
        .fans-page .pro-page-layout .el-pagination .el-pager li.active, .fans-page .pro-page-layout .el-pagination .el-pager li:not(.disabled).active,
        .n-yjdialog-modal .n-yj-form .yj-foot-btns .cancel,
        .work-page .footer-fun-bar .preview,
        .work-page .footer-fun-bar .draft,
        .work-page .basic-box .import-video-btn,
        .game-page .footer-fun-bar .preview,
        .game-page .footer-fun-bar .draft,
        .game-page .basic-box .import-video-btn,
        .sp-container .sp-button-container .sp-cancel,
        .uhome > .user .private-to,
        .acc-basic .up-row .upload-btn .el-upload .el-upload-dragger,
        .acc-basic .form-item .primary-btn,
        .acc-basic .other-form-item .bind-item .bind:not(.confirm),
        .uhome > .user .edit-info{
            background-color:#52565A;
        }
        .private-letter-modal .prv-rt-modalcon .prvrt-header .tit.has-action .more-dwns .dwns-btn{
            background-image:url('../../assets/pro/l_a_arrow_down.svg');
        }
        .private-letter-modal .prv-rt-modalcon .prvrt-header .tit.has-action .more-dwns .dwns-items{
            background:#FBFCFD;
            li a{
                &:hover{
                    background-color:#F1F2F4;
                }
            }
        }
        .empty .icon{
            background-image:url('../../assets/pro/l_empty.svg');
        }
        .empty.comment-empty .icon{
            background-image:url('../../assets/pro/l_no_comment.svg');
        }
        .private-letter-modal .prv-rt-modalcon .prv-rt-messages .msg-time{
            background:#EEEEEE;
            line-height:30px;
            border-radius:15px;
            max-width:130px;
            margin:18px auto 37px auto;
            display: block;
        }
        .mk-cus-ddl .sub-dd-block.multiple{
            box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.08);
            border-radius: 16px;
            .wrap{
                background-color:#fff;
                .sub-ddls{
                    li{
                        a:not(active){
                            background-color:#F1F2F4;
                        }
                        a.active{
                            background-color:#11CCB1;
                        }
                        a:hover{
                            background-color:#11CCB1;
                            color:#fff;
                        }
                    }
                }
            }
        }
        .mk-cus-ddl .sub-dd-block{
            .d-b-wrap{
                box-shadow:0 0 12px 3px rgba(0,0,0,.3);
                background-color:#fff;
            }
            .sub-ddls{
                background-color:#fff;
                li{
                    background-color:#fff;
                    a{
                        background-color:#fff;
                        &.active{
                            background-color:#fff;
                        }
                        &:hover{
                            background-color:#fff;
                        }
                    }
                }
            }
        }
        .mk-cus-ddl .sub-dd-block.multiple .max-tit .close-win-box,.cover-win-box .u-header .close-win-box{
            // background-image:url('../assets/pro/close_win.svg');
          background: url('../../assets/pro/close-win.svg') no-repeat;
        }
        .comm-comment .comment-box{
            .send-box{
                .add-face{
                    color:#191C1E;
                    &:hover{
                        background-image: url('../../assets/pro/top_cmt_face.svg');
                        .fave-single-tip{
                            color:#fff;
                        }
                    }
                }  
            }
            .comments .comment-data-item .r-con .reply-area{
                .add-face{
                    color:#52565A;
                    &:hover{
                        background-image: url('../../assets/pro/top_cmt_face.svg');
                        .fave-single-tip{
                            color:#fff;
                        }
                    }
                }
                .txt-area i{
                    background-color:#F1F2F4;
                    color:#191C1E;
                    bottom:5px;
    
                    right:7px;
                }
                textarea{
                    background-color:#F1F2F4;
                    color:#191C1E;
                    
                    i{
                        background-color:#F1F2F4;
                        color:#191C1E;
                        bottom:5px;
    
                        right:7px;
                    }
                    &:focus{
                        border:1px solid #11CCB1;
                    }
                }
            }
        }
        .cover-win-box .u-header{
            color:#191C1E;
        }
        .pro-wlrk-elcascader-proper .el-cascader-node.is-active, .pro-wlrk-elcascader-proper .el-cascader-node.in-active-path
        {
            background-color:#FBFCFD;
        }
        .bs-layout-rst-fun .upload-area-wrap .fun-text{
            color:#191C1E;
        }
        .n-yjdialog-modal .n-yj-form .form-field label,.n-dialog-header{
            color:#191C1E;
        }
        .n-yjdialog-modal .n-yj-form .form-field.textarea textarea,.n-yjdialog-modal .n-yj-form .form-field input[type="text"]{
            background-color:#F1F2F4;
            color:#191C1E;
        }
        .n-dialog-container .n-login-tip .user-xy{
            color:#52565A;
        }
        .pro-header .search-bx .pro-search-full-box .be-simliar .bs-layout-fun .upload-area-wrap .fun-text{
            color:#191C1E;
        }
        .search-page .first-result-row .result-item .data-box .t-imgs .f-img,.atlas-layout-column .fav-d-item .img-flex-box .rt-img .last-img,.atlas-layout-column .fav-d-item .img-flex-box .rt-img .next-img,.atlas-layout-column .fav-d-item .img-flex-box .lt-img,.collections-page .fav-datas .fav-d-item .img-flex-box .rt-img .last-img,.collections-page .fav-datas .fav-d-item .img-flex-box .rt-img .next-img,.collections-page .fav-datas .fav-d-item .img-flex-box .lt-img,.following-page .atlas-layout-column .fav-d-item .img-flex-box .lt-img,.search-page .jitu-wrap .data-box .t-imgs .n-imgs span,.search-page .jitu-wrap .data-box .t-imgs .f-img,.search-page .first-result-row .result-item .data-box .t-imgs .n-imgs span,.following-page .atlas-layout-column .fav-d-item .img-flex-box .rt-img .next-img,.following-page .atlas-layout-column .fav-d-item .img-flex-box .rt-img .last-img{
            background-color:#D7D7D7;
        }
        .pro-header .search-bx .pro-search-full-box .be-simliar .bs-layout-fun .upload-area-wrap{
            box-shadow:none;
            border-color:#9A9A9C;
            background-image:url('../../assets/pro/l_smlike_transfer.svg');
        }
        .bs-layout-rst-fun{
            background-color:#fff;
            box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.08);
            .upload-area-wrap{
                box-shadow:none;
                border-color:#9A9A9C;
                background-image:url('../../assets/pro/l_smlike_transfer.svg');
                &:hover{
                    border-color:#11CCB1;
                }
            }
        }
        .game-page .bot-single-upload-area,.work-page .bot-single-upload-area{
            background-color:#fff;
            border-color:#52525C;
            &:hover{
                border-color:#11CCB1;
            }
        }
        .game-page .bot-single-upload-area .plus,.work-page .bot-single-upload-area .plus{
            color:#191C1E;
        }
        .fav-component .fav-header{
            color:#191C1E;
        }
        .fav-component{
            background-color:#fff;
            color:#191C1E;
        }
        .game-page .panel-tit .funs{
            .img-select-len{
                color:#fff;
            }
            a{
                color:#fff;
            }
        }
        .pro-wlrk-elcascader-proper{
            background-color:#F1F2F4;
            border-color:#F1F2F4;
            .el-cascader-node__label{
                color:#191C1E;
            }
        }
        .pro-wlrk-elcascader-proper .el-cascader-node:not(.is-disabled):focus, .pro-wlrk-elcascader-proper .el-cascader-node:not(.is-disabled):hover{
            background-color:#FBFCFD !important;
        }
        .list-data-box .top-filter-area .nums{
            color:#191C1E;
        }
        .works-list-page .gp-filter,.article-list-page .gp-filter{
            background:#FBFCFD;
        }
        .uhome .fav-datas .fav-d-item.create-btn a .text{
            color:#191C1E;
        }
        .manage-page .manage-data-box .list .list-item .ldata .basic .tit,.manage-page .manage-data-box .list .list-item .r-action a{
            color:#191C1E;
            &.edit{
                background-image:url('../../assets/pro/l_mgr_item_edit.svg');
            }
            &.share{
                background-image:url('../../assets/pro/l_mgr_item_share.svg');
            }
            &.remove{
                background-image:url('../../assets/pro/l_mgr_item_del.svg');
            }
        }
        .uhome{
            .topbar .t-box .seach-bx,.game-list-page .sub-row .right .seach-bx{
                form{
                    background-color:#FBFCFD;
                }
                input{
                    background-color:#FBFCFD;
                    color:#191C1E;
                }
            }
        }
        .game-list-page .top .left .back-tit .tit-text,.game-list-page .sub-row .left .uname{
            color:#191C1E;
        }
        .main-navs .nav.cur{
            color:#11ccb1;
        }
        .mk-cus-ddl .sub-dd-block .sub-ddls{
            li{
                a{
                    &:not(active){
                        color:#191C1E;
                        &:hover{
                            background-color:#F1F2F4;
                        }
                    }
                }
            }
        }
        .search-page .first-result-row .result-item .mu-items-box .bdl-data-item .title-row .num.znum,.uhome .fav-datas .fav-d-item .bot-author .like-num,.following-page .games .fav-d-item .bot-author .vnum,.search-page .list-wrap.wk-list-area .list-box .bdl-data-item .bot-author .rt .znum,.game-list-page .games-data .gd-item .basic-info .bot-desc .znum, .games-page .games-data .gd-item .basic-info .bot-desc .znum,.search-page .list-wrap.wk-list-area .list-box .bdl-data-item .bot-author .like-num,.search-page .list-box .bdl-data-item .title-row .num.znum,.ald-ba-data .data-wrap .bdl-data-item .basic-info .bot-desc .znum,.works-list-page .games-data .dx-vd-item .fav-d-item .bot-author .like-num, .article-list-page .games-data .dx-vd-item .fav-d-item .bot-author .like-num{
            color:#52565A;
            background-image:url('../../assets/pro/l_gzan.svg');
            padding-left:22px;
        }
        .ald-ba-data .data-wrap .bdl-data-item .basic-info .bot-desc .vnum{
            background-image:url('../../assets/pro/l_vnum.svg');
        }
        .n-dialog-container .n-forget-m-tit{
            color:#191C1E;
        }
        .n-dialog-container .n-forget-m-sub-tit{
            color:#52565A;
        }
        .search-page .img-datas .b-tit{
            color:#191C1E;
        }
        .n-dialog-container .n-login-type span.active{
            color:#191C1E;
            &:after{
                background:#11CCB1;
            }
        }
        .n-dialog-container{
            .n-login-form .field-item .get-code-btn{
                color:#191C1E;
            }

            .n-login-logo{
                // display: none;
            }
            .sys-logo{
                // background:url('../../assets/pro/l_logo.svg') no-repeat;
                // background-position: center;
                // height:40px;
                // width:110px;
                // display: block;
                // margin:0 auto;
            }
        }
        .n-dialog-container .n-login-form .field-forget-pwd-tip{
            color:#52565A;
        }
        .n-dialog-container .n-login-form .field-item input{
            background-color:#F1F2F4;
            color:#191C1E;
        }
        .acc-basic .other-form-item .tag-control .inp-tags .tag{
            background-color:#ddd;
            color:#52565A;
        }
        .private-letter-modal .prv-rt-modalcon .input-msg-box .msg-input{
            background:#fff;
            color:#191C1E;
            &.active{
                background-color:#fff;
            }
        }
        .private-letter-modal .prv-rt-modalcon .prv-rt-messages .lt-msg .msg-con{
            background-color:#fff;
            color:#191C1E;
        }
        body{
            
            &::-webkit-scrollbar-thumb{
                background-color:#969696;
            }
        }
        .bodyView{
            background:#FBFCFD;
            &:not(.is-home){
                .pro-header{
                    background-color:#FBFCFD;
                }
            }
        .hot-row li.no-data, .center-b-area .b-a-left .ba-datas .bdl-data-item.no-data, .ho-dds li.no-data, .hot-gx-data .item.no-data, .ald-ba-data .data-wrap .bdl-data-item.no-data, .zj-ba-data .data-wrap .bdl-data-item.no-data, .zj-ba-data .yx-cates .yx-c-item.no-data, .game-list-page .games-data .gd-item.no-data, .games-page .games-data .gd-item.no-data, .waf-ligan-item .no-data, .works-list-page .games-data .dx-vd-item.no-data, .article-list-page .games-data .dx-vd-item.no-data, .games-page .top-games li.no-data, .article-single-page .wp-content-lft .work-datas .wk-d-item.no-data, .article-single-page .wp-content-rt .rank-datas li.no-data, .recruit-page .recruit-page-conbox .layout-box .left .job-item.no-data, .rank-page .list-box .list-item.no-data, .user-swp-wrap .no-data, .m-at-con-wrap .first-all.no-data, .uhome .fav-datas .fav-d-item.no-data, .uhome .atlas-layout-column .fav-d-item.no-data, .collections-page .fav-datas .fav-d-item.no-data, .follow-exclusive-settings .users .user-item.no-data, .follow-exclusive-settings .fans-datas .fans-item.no-data, .follow-exclusive-settings .atlas-layout-column .fav-d-item.no-data, .follow-exclusive-settings .atlas-list .atla-item.no-data, .following-page .atlas-layout-column .fav-d-item.no-data, .rank-page .rank-l .content-list-area .item.no-data, .following-page .games .fav-d-item.no-data
        {
            background:#F5F5F5;
        }
        .game-list-page .games .fav-d-item .bot-author{
            span{
                color:#52565A;
            }
        }
        .left-nav .bot .contact-img-code{
            .wx{
                background:url('../../assets/pro/l_wx_icon.svg');
            }
            .xiaohongshu{
                background:url('../../assets/pro/l_xiaohongshu.svg');
            }
        }
        .about-header{
            background:#FBFCFD;
        }
        .work .right-con-box .ico-btns{
            border-color:#ddd;
        }
        .game-list-page .games .fav-d-item{
            background-color:#F1F2F4;
            .file-name{
                color:#191C1E;
            }
            .bot-author .u .name{
                color:#191C1E;
            }
        }
        .about-header .left-back{
            border-radius:16px;
            background-color:#F1F2F4;
            background-image:url('../../assets/pro/l_gminfo_topback.svg');
            background-size:22px;
            background-position: center;
            &:hover{
                background-color:#ddd;
            }
        }
        .work .right-con-box .comments .comment-data-item .r-con .name{
            color:#52565A;
        }
        .article-single-page .wp-content-rt .panel-tit{
            color:#191C1E;
        }
        .work .right-con-box .comments .comment-data-item .r-con .bot .funs .cmt-zan{
            color:#9A9A9C;
        }
        .work .right-con-box{
            background-color:#FBFCFD;
            .comments .comment-data-item .r-con{
                background-color:#F1F2F4;
                .con-html{
                    color:#191C1E;
                }
            }
        }
        .about-con-box{
            background:#F1F2F4;
            *{
                color:#191C1E !important;
            }
        }
        .about-header .header-tab a{
            &.active{
                color:#191C1E;
            }
            &:hover{                
                color:#191C1E;
            }
        }
        .img-component .b-img-box .im-wrap.show .left-m-img.no-data:after,
        .hot-row li.no-data:after, 
        .center-b-area .b-a-left .ba-datas .bdl-data-item.no-data:after, 
        .ho-dds li.no-data:after, .hot-gx-data .item.no-data:after, 
        .ald-ba-data .data-wrap .bdl-data-item.no-data:after, 
        .zj-ba-data .data-wrap .bdl-data-item.no-data:after, 
        .zj-ba-data .yx-cates .yx-c-item.no-data:after, 
        .game-list-page .games-data .gd-item.no-data:after, 
        .games-page .games-data .gd-item.no-data:after, 
        .waf-ligan-item .no-data:after, 
        .works-list-page .games-data .dx-vd-item.no-data:after, 
        .article-list-page .games-data .dx-vd-item.no-data:after, 
        .games-page .top-games li.no-data:after, 
        .article-single-page .wp-content-lft .work-datas .wk-d-item.no-data:after, 
        .article-single-page .wp-content-rt .rank-datas li.no-data:after, 
        .recruit-page .recruit-page-conbox .layout-box .left .job-item.no-data:after, 
        .rank-page .list-box .list-item.no-data:after, 
        .user-swp-wrap .no-data:after, 
        .m-at-con-wrap .first-all.no-data:after, 
        .uhome .fav-datas .fav-d-item.no-data:after, 
        .uhome .atlas-layout-column .fav-d-item.no-data:after, 
        .collections-page .fav-datas .fav-d-item.no-data:after, 
        .follow-exclusive-settings .users .user-item.no-data:after, 
        .follow-exclusive-settings .fans-datas .fans-item.no-data:after, 
        .follow-exclusive-settings .atlas-layout-column .fav-d-item.no-data:after, 
        .follow-exclusive-settings .atlas-list .atla-item.no-data:after, 
        .following-page .atlas-layout-column .fav-d-item.no-data:after, 
        .rank-page .rank-l .content-list-area .item.no-data:after, 
        .following-page .games .fav-d-item.no-data:after
        {
            background:linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, rgba(248, 248, 248,1) 50%, rgba(248, 248, 248, 1) 100%);
        }
        .manage-page .manage-data-box{
            background-color:#fff;
        }
        .first-result-row{
            .result-item{
                .b-tit{
                    color:#191C1E;
                }
            }
        }
        .fans-page .fans-datas .fans-item{
            background-color:#F1F2F4;
        }
        .manage-page .topbar{
            background-color:#F1F2F4;
        }
        .pro-header .search-bx .pro-search-full-box .psf-wrap .pro-search-result .result-item{
            .basic{
                .title-wrap{
                    .title{
                        color:#52565A;
                    }
                }
            }
            .catre{
                color:#9A9A9C;
            }
            &:hover{
                background-color:#F1F2F4;
            }
        }
        .img-list-page .top .left .back-tit{
            color:#191C1E;
        }
        .img-list-page .sub-row .left .uname{
            color:#52565A;
        }
        .search-by-image-result-page .layout-right .tit{
            color:#191C1E;
        }
        .fans-page .panel-row{
            color:#191C1E;
        }
        .fans-page .fans-datas .fans-item .ldata .name{
            color:#191C1E;
        }
        .fans-page .fans-datas .fans-item .ldata .num-b{
            color:#52565A;
        }
        .work-page .basic-box,.game-page .basic-box,.publish-article-page .basic-box{
            background-color:#fff;
        }
        .bs-g-flabel.gpic-clr{
            .cur{
                color:#191C1E;
            }
        }
        .bs-g-flabel.gpic-clr,.mk-cus-ddl .cur:not(.no-cur-bg){
            background-image:url('../../assets/pro/l_common_ddl_arrow.svg');
            background-repeat: no-repeat;
        }
        .img-component .b-img-box .collapse-img-rbar{
            background-image:url('../../assets/pro/l_img_right_collapse.svg');
        }
        .work-page .game-img-workbox,.game-page .game-img-workbox,.publish-article-page .game-img-workbox{
            background-color:#fff;
        }
        .img-component .b-img-box,.zdx-v-container{
            .img-prev{
                background-image:url('../../assets/pro/l_img_prev.svg');
                &:hover{
                    background-image:url('../../assets/pro/l_img_prev_press.svg');
                }
            }
            .img-next{
                background-image:url('../../assets/pro/l_img_next.svg');
                &:hover{
                    background-image:url('../../assets/pro/l_img_next_press.svg');
                }
            }
        }
        .collections-page .fav-datas .fav-d-item{
            background-color:#F1F2F4;
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
            }
        }
        .game-page .game-img-workbox .single-upload-btn .ass-con .up-text,.work-page .game-img-workbox .single-upload-btn .ass-con .up-text{
            color:#191C1E;
        }
        .work-page .game-img-workbox .single-upload-btn,.game-page .game-img-workbox .single-upload-btn{
            background-color:#fff;
            border-color:#9A9A9C;
            background-image:url('../../assets/pro/l_single_upload_bgico.svg');
            &:hover{
                border-color:#11CCB1;
            }
        }
        .work-page .game-img-workbox .single-upload-btn .ass-con .plus,.game-page .game-img-workbox .single-upload-btn .ass-con .plus{
            color:#52565A;
        }
        .work .right-con-box .sub-desc{
            *{
                background-color:#FBFCFD !important;
                color:#52565A !important;
            }
        }
        .follow-exclusive-settings .basic-tit,.sub-tj-row{
            color:#191C1E;
        }
        .follow-exclusive-settings .basic-desc,.follow-exclusive-settings .op-row .num{
            color:#52565A;
        }
        .follow-exclusive-settings .atlas-list .atla-item{
            background-color:#F1F2F4;
            .title{
                color:#191C1E;
            }
        }
        .follow-exclusive-settings .atlas-layout-column .fav-d-item,.follow-exclusive-settings .atlas-layout-column .fav-d-item .top-b,.follow-exclusive-settings .atlas-layout-column .fav-d-item .bot-desc{
            background-color:#F1F2F4;
        }
        .follow-exclusive-settings .op-row .layout-model{
            background-color:#F1F2F4;
        }
        .follow-exclusive-settings .users .user-item,.follow-exclusive-settings .fans-datas .fans-item{
            background-color:#F1F2F4;
            .name{
                color:#191C1E;
            }
            .nums{
                color:#52565A;
            }
            .num-b{
                color:#52565A;
                font-weight:normal;
            }
        }
        .follow-exclusive-settings .op-row .main-tab a.cur{
            color:#191C1E;
        }
        .work .right-con-box .publish-time{
            color:#9A9A9C;
        }
        .work .right-con-box .ico-btns a,.work .right-con-box .user .basic .desc{
            color:#52565A;
        }
        .uhome .basic-data .tags a{
            background-color:#fff;
            color:#52565A;
            cursor:default;
        }
        .work-page .recommend-tag-box .label{
            color:#52565A;
        }
        .work-page .tag-control .inp-tags .tag,.publish-article-page .tag-control .inp-tags .tag,.work .right-con-box .tags .tag{
            background-color: #ddd;
            color:#191C1E;
        }
        .work-page .basic-box .upload-video-btn,.work-page .basic-box .upload-btn,.game-page .basic-box .upload-btn,.game-page .basic-box .upload-videos .upload-video-btn,.publish-article-page .basic-box .upload-btn{
            border-color:#9A9A9C;
            &:hover{
                border-color:#11CCB1;
            }
        }
        .work-page .recommend-tag-box .tags .tag,.publish-article-page .recommend-tag-box .tags .tag{
            background-color: #F1F2F4;
            color:#191C1E;
            &:hover{
                background-color:#ddd;
            }
        }
        .pro-pbform-ckbox{
            &:not(.is-checked){
                .el-checkbox__inner{
                    background-color:#F1F2F4;
                }
            }
        }
        .work-page .basic-box .p-label-field-control label,.game-page .basic-box .p-label-field-control label{
            color:#191C1E;
        }
        .pro-pbform-ckbox .el-checkbox__label,.publish-article-page .recommend-tag-box .label,.publish-article-page .basic-box .p-label-field-control label{
            color:#52565A;
        }
        .pro-work-elcascader .el-input .el-input__inner{
            background-color:#F1F2F4 !important;
            border-color:#F1F2F4 !important;
            &::placeholder{
                color:#191C1E !important;
            }
        }
        .pro-quill-editor{
            background-color: #F1F2F4;
            color:#191C1E;
        }
        .work-page .tag-control,.publish-article-page .tag-control{
            background-color: #F1F2F4;
            input{
                background-color: #F1F2F4;
                color:#191C1E;
            }
            .num{
                background-color: #F1F2F4; 
            }
        }
        .work-page .basic-box .p-field-control .word-num,.game-page .basic-box .p-field-control .word-num{
            background-color: #F1F2F4;
        }
        .work-page .panel-tit,.game-page .panel-tit,.publish-article-page .panel-tit{
            color:#191C1E;
            font-weight:500;
            font-family: PingFangSC, PingFang SC;
            .tit{
                color:#191C1E;
            }
        }
        .acc-basic .other-form-item label{
            color:#52565A;
        }
        .acc-basic .form-item textarea,.acc-basic .form-item input[type="text"],.work-page .basic-box .p-field-control input[type="text"],.game-page .basic-box .p-field-control input[type="text"],.publish-article-page .basic-box .p-field-control input[type="text"],.game-page .basic-box .p-label-field-control input[type="text"]{
            background-color: #F1F2F4;
            color:#191C1E;
        }
        .atlas-layout-column .fav-d-item .img-flex-box{
            background-color: #F1F2F4;
        }
        .atlas-layout-column .fav-d-item{
            background-color: #F1F2F4;
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
            }
        }
        .atlas-layout-column .fav-d-item.create-btn a .text{
            color:#191C1E;
        }
        .uhome .fav-datas .fav-d-item{
            background-color: #F1F2F4;
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
            }
            .bot-author{
                color:#52565A;
            }
        }
        .uhome .fav-datas .fav-d-item .bot-desc .type-text{
            border-color:#ddd;
        }
        .publish-nav-menus{
            background-color:#F1F2F4;
            li{
                a{
                    color:#191C1E;
                }
                &.active{
                    a{
                        color:#fff;
                    }
                }
                &:not(.active){
                    a:hover{
                        color:#fff;
                    }
                }
                &.split:after{
                    background-color:#ddd;
                }
            }
        }
        .collections-page .fav-datas .fav-d-item.create-btn a .text{
            color:#191C1E;
        }
        .rank-page .rank-r .panel-tit{
            color:#191C1E;
        }
        .rank-page .rank-l .content-list-area .item{
            &:nth-child(n+4) .sort-num{
                color:#191C1E;
            }
        }
        .acc-basic .step .el-radio-group .el-radio__input.is-checked + .el-radio__label{
            color:#191C1E;
        }
        .acc-basic .step .el-radio-group .el-radio__input.is-checked .el-radio__inner{
            background-color: #F1F2F4;
            border-color:#ddd;
        }
        .acc-basic .other-form-item .tag-control{
            background-color: #F1F2F4;
            input{
                background-color: #F1F2F4;
                color:#191C1E;
            }
        }
        .following-page .atlas-layout-column .fav-d-item .top-b,.following-page .atlas-layout-column .fav-d-item .bot-desc{
            background-color: #F1F2F4;
        }
        .acc-basic .other-form-item .tag-control .num{
            background-color: #F1F2F4;
        }
        .manage-page .manage-data-box .total .filter-bx .seach-bx,.collections-page .fav-tab .seach-bx{
            form{
                background-color:#F1F2F4;
            }
            input{
                background-color:#F1F2F4;
                color:#191C1E;
            }
        }
        .img-list-page .sub-row .right .seach-bx{
            form{
                background-color:#F1F2F4;
            }
            input{
                background-color:#F1F2F4;
                color:#191C1E;
            }
        }
        .search-page .first-result-row .result-item .data-box,.search-page .first-result-row .result-item .mu-items-box .bdl-data-item,.search-page .jitu-wrap .data-box{
            background-color:#F1F2F4;
            .title-row{
                .title{
                    color:#191C1E;
                }
            }
            .u-row{
                color:#52565A;
                .name{
                    color:#52565A;
                }
            }
        }
        .close-modal-page{
            background-color:#F1F2F4 !important;
            color:#52565A;
            &:hover{
                background-color:#ddd !important;
            }
        }
        .left-nav
        {
            .collapse-nav{
                a:hover{
                    color:#11CCB1;
                }
            }
        }
        .img-texts{
            background-color:#f1f2f4;
            box-shadow: none;
            .img-text-items .text{
                background-color:#ddd;
                color:#52565A;
            }
        }
        .pro-main-mask{
            // background: rgba(0,0,0,0.2);
        }
        .home-search-mask{
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: saturate(180%) blur(16px);
        }
        .top-cmon-full{
            .psf-wrap{
                background-color:#fff;
                .yd-types a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    &:hover{
                        background-color:#ddd;
                    }
                }
                .search-s-tit{
                    color:#9A9A9C;
                }
                .pro-hot-concentration a img{
                    opacity:1;
                }
                .pro-near-searchs a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    font-weight: normal;
                    &:hover{
                        background-color:#ddd;
                    }
                }
                .pro-hot-searchs a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    &:hover{
                        background-color:#ddd;
                    }
                }
            }
        }
        .pro-header{
            .search-bx form{
                background-color:#F1F2F4;
                border-color:#F1F2F4;
                input{
                    background:#F1F2F4;
                    color:#191C1E;
                }
                .search-by-type{
                    background-color:#fff;
                    color:#52565A;
                }
                &.active{
                    background-color:#fff;
                    input{
                        background-color:#fff;
                    }
                }
            }
            &.active{
                .header-mask{
                    &:after{
                        background: rgba(0,0,0,0.2);
                    }
                }
            }
            .pro-search-full-box .psf-wrap{
                background-color:#fff;
                .yd-types a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    &:hover{
                        background-color:#ddd;
                    }
                }
                .search-s-tit{
                    color:#9A9A9C;
                }
                .pro-hot-concentration a img{
                    opacity:1;
                }
                .pro-near-searchs a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    font-weight: normal;
                    &:hover{
                        background-color:#ddd;
                    }
                }
                .pro-hot-searchs a{
                    background-color:#F1F2F4;
                    color:#52565A;
                    &:hover{
                        background-color:#ddd;
                    }
                }
            }
        }
        .img-component{
            background:#FBFCFD;
        }
        .sys-logo{
            // background:url('../../assets/pro/l_logo.svg') no-repeat;
            // background-position: center;
            // height:38.73px;
            // width:109.68px;
        }
        .dark-logo{
            // display: none;
        }
        .custom-scroll{
            &::-webkit-scrollbar-thumb{
                background-color:#E5E5EA;
            }
        }
        .filter-by{
            background:#F3F4F6;
            .cates{
                .cate-name{
                    color:#191C1E;
                    &:after{
                        background-image:url('../../assets/pro/l_cate_m_arrow.svg');
                        background-position:center;
                        transform: rotate(0deg);
                    }
                    &:hover{
                        background:#F1F2F4;
                    }
                    &.collapse{
                        &:after{
                            transform: rotate(180deg);
                        }
                    }
                }
                .sub-cates{
                    li{
                        &.active{
                            .text{
                                color:#52565A;
                            }
                        }
                    }
                }
            }
        }
        .hot-row li .desc-tit,
        .bal-tit .has-arrow,
        .bal-tit,.big-panel-tit,.my-likes-page .page-tit,.browse-records .page-tit{
            color:#191C1E;
            font-weight:500;
        }
        .img-component .other-tit,.img-component .face-area .author-info .user .name{
            color:#191C1E;
        }
        .pro-page-bar .ques{
            background-image:url('../../assets/pro/l_ques.svg');
        }
        .pro-page-bar .top{
            background-image:url('../../assets/pro/l_top.svg');
        }
        .col-side-bar{
            background-image:url('../../assets/pro/l_collapse_menu.svg');
            background-repeat:no-repeat;
            &:hover{
                background-color:#3b3b3b;
            }
        }
        .pro-marquee-comments .pro-top-comments:not(.gd-rows) .item .cmt-ri-con{
            &:before{
                background: rgba(47,49,61,0.1);
            }
        }
        .pro-marquee-comments .pro-top-comments .item .cmt-html,.pro-marquee-comments .pro-top-comments .item .cmt-ri-con .uname{
            color:#191C1E;
        }
        .comm-comment .comment-box .comments .comment-data-item .r-con{
            background-color:#FBFCFD;
        }
        .comm-comment .comment-box .comments .comment-data-item .r-con .bot .funs a{
            color:#52565A;
        }
        .comm-comment .comment-box .comments .comment-data-item .r-con .con-html{
            color:#191C1E;
        }
        .comm-comment .comment-box .comments .comment-data-item .r-con .name{
            color:#52565A;
        }
        .browse-records .games-data .dx-vd-item{
            border-color:#FBFCFD;
            &:hover{
                border-color:#11CCB1;
            }
        }
        .browse-records .time-tit.flex-tit{
            color:#52565A;
        }
        .q-f-item{
            background-color:#ddd;
            color:#52565A;
            .ct{
                background-color:#ddd;
            }
        }
        .manage-page .topbar .main-tab a.cur{
            color:#191C1E;
        }
        .manage-page .topbar .sub-tab{
            a.cur{
                background-color: #52565A;
            }
            a:not(.cur){
                &:hover{
                    background-color: #52565A;
                }
            }
        }
        .publish-article-page{
            .pro-quill-editor{
                background-color:#fff;
            }
            
            .ar-pro-quill-editor {
                border-radius: 16px;
                .ql-snow .ql-stroke{
                    stroke:#52565A !important;
                }
                .ql-snow .ql-fill{
                    fill:#52565A !important;
                }
                .ql-snow .ql-picker{
                    color:#52565A !important;
                }
                .ql-snow .ql-picker-options{
                    background:#ddd;
                }
                .ql-color-picker{
                    .ql-picker-options{
                        background:#ddd;
                        left:-124px;
                    }
                }
                .ql-toolbar.ql-snow .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{
                    border-color:#ddd !important;
                }
            
                .ql-snow.ql-toolbar button:hover .ql-fill,
                .ql-snow .ql-toolbar button:hover .ql-fill,
                .ql-snow.ql-toolbar button:focus .ql-fill,
                .ql-snow .ql-toolbar button:focus .ql-fill,
                .ql-snow.ql-toolbar button.ql-active .ql-fill,
                .ql-snow .ql-toolbar button.ql-active .ql-fill,
                .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
                .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
                .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
                .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
                .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
                .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
                .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
                .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
                .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
                .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
                .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
                    fill: #11CCB1 !important;
                }
            
                .ql-snow.ql-toolbar button:hover,
                .ql-snow .ql-toolbar button:hover,
                .ql-snow.ql-toolbar button:focus,
                .ql-snow .ql-toolbar button:focus,
                .ql-snow.ql-toolbar button.ql-active,
                .ql-snow .ql-toolbar button.ql-active,
                .ql-snow.ql-toolbar .ql-picker-label:hover,
                .ql-snow .ql-toolbar .ql-picker-label:hover,
                .ql-snow.ql-toolbar .ql-picker-label.ql-active,
                .ql-snow .ql-toolbar .ql-picker-label.ql-active,
                .ql-snow.ql-toolbar .ql-picker-item:hover,
                .ql-snow .ql-toolbar .ql-picker-item:hover,
                .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
                .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
                .ql-snow.ql-toolbar button:hover .ql-stroke,
                .ql-snow .ql-toolbar button:hover .ql-stroke,
                .ql-snow.ql-toolbar button:focus .ql-stroke,
                .ql-snow .ql-toolbar button:focus .ql-stroke,
                .ql-snow.ql-toolbar button.ql-active .ql-stroke,
                .ql-snow .ql-toolbar button.ql-active .ql-stroke,
                .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
                .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
                .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
                .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
                .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
                .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
                .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
                .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
                .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
                .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
                .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
                .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
                .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
                .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
                .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
                .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
                .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
                .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
                .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
                .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
                .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
                .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
                    color: #11CCB1 !important;
                    stroke: #11CCB1 !important;
                }
            }
        }
        .acc-basic .page-tit{
            color:#191C1E;
        }
        .acc-basic .form-item label,.acc-basic .up-row .tbox .name{
            color:#52565A;
        }
        .u-set-layout .set-layout-con{
            background-color:#fff;
        }
        .comp-article-page .article-top .info-title{
            text-shadow: none;
            color:#191C1E;
        }
        
        .comp-article-page .article-top .u-row .user .name{
            color:#191C1E;
        }
        .work .right-con-box .user .follow{
            &:not(.active){
                background:url('../../assets/pro/l_work_follow.svg') no-repeat;
                background-position: 8% center;
            }
        }
        .html-content *, .article-con *{
            background:#FBFCFD !important;
            color:#191C1E !important;
        }
        .comp-article-page .article-top .u-row .funs .private-to{
            color:#191C1E;
        }
        .work .right-con-box .comment-area .send-mbox{
            background-color:#FBFCFD;
            .right .opbtns{
                background-color:inherit;
            }
        }
        .pro-work-elcascader .el-input .el-input__inner{
            color:#191C1E;
        }
        .work .right-con-box .title{
            color:#191C1E;
        }
        .work .right-con-box .user .basic .name{
            color:#191C1E;
        }
        .work .right-con-box .user .follow{
            color:#52565A;
        }
        .work .right-con-box .tabs span{
            &.active{
                color:#191C1E;
                font-weight:normal;
                border-color:#11CCB1;
            }
        }
        .sender-txt .el-textarea__inner{
            background:rgba(47, 49, 61, 0.21);
            color:#191C1E;
            &::placeholder{
                color:#191C1E;
            }
        }
        .uhome{
            .user{
                background-color:#F1F2F4;
                .basic{
                    .name{
                        color:#191C1E;
                    }
                    .stis-num{
                        color:#191C1E;
                    }
                }
            }
            .topbar{
                background-color:#F1F2F4;
                .t-box .main-tab a.cur{
                    color:#191C1E;
                    border-color:#11CCB1;
                }
                .sub-tab a{
                    &:not(.la-manage):hover{
                        background-color:#52565A;
                        i{
                            color:#fff;
                        }
                    }
                    &:not(.la-manage).cur{
                        background-color:#52565A;
                        i{
                            color:#fff;
                        }
                    }
                }
            }
        }
        .gp-filter{
            .label-filter .plat-items .pitem.active{
                // background-color:#F1F2F4;
            }
        }
        .recruit-page .recruit-page-conbox .filter .search-bx form{
            background-color:#F1F2F4;
            border-color:#F1F2F4;
            input{
                background-color:#F1F2F4;
                color:#191C1E;
            }
        }
        .my-likes-page .mk-filter-row .filter-bx .seach-bx form,.gp-filter .seach-bx form,.game-list-page .sub-row .right .seach-bx form{
            background-color:#F1F2F4;
            border-color:#F1F2F4;
            input{
                background-color:#F1F2F4;
                color:#191C1E;
                padding-left:36px;
            }
        }
        .dm-btns .view-dm-win{
            color:#52565A;
        }
        .img-component .b-img-box .r-propertys .title,.img-component .b-img-box .r-propertys .tag-tit .text{
            background-color:#F1F2F4;
            color:#191C1E;
        }
        .game-page .center-info .dx-video-datas .dx-vd-item{
            border-color:#ddd;
        }
        .img-component .b-img-box .r-propertys .tag-tit .tags-wrap .tags-box a{
            border-color:#ddd;
            &:hover{
                background-color:#ebebeb;
            }
        }
        .img-component .b-img-box .im-wrap{
            border-color:#ddd;
            .left-m-img{
                background-color:#FBFCFD;
            }
        }
        .img-component .b-img-box .r-propertys{
            background-color:#F1F2F4;
        }
        .dm-btns,.img-component .face-area .l-face-area .face-con{
            background-color:#F1F2F4;
        }
        .game-page .center-info .search-bx form{
            background-color:#f1f2f4;
            input{
                background-color:#f1f2f4;
                color:#191C1E;
            }
        }
        .img-component .face-area .l-face-area .send-mbox .right input{
            background-color:#F1F2F4;color:#191C1E;
        }
        .comm-comment .comment-box .tit-num{
            color:#191C1E;
            i{
                color:#52565A;
            }
        }
        .comm-comment .comment-box .comment-inp textarea{
            background-color:#FBFCFD;
            color:#52565A;
            &::placeholder{
                color:#52565A;
            }
        }
        .game-list-page .gp-filter{
            background-color:#FBFCFD;
        }
        .comm-comment{
            background-color:#F1F2F4;
        }
        .img-detail.single .img-component{
            background-color:#FBFCFD;
        }
        .search-by-image-result-page .layout-left .top-row .title{
            color:#191C1E;
        }
        .img-component .top-bar .right-funs .btn{
            background-color:#F1F2F4;
            color:#52565A;
            &.clear-redborder{
                background-image:url('../../assets/pro/l_clear_rbd.svg');
            }
            &.bw-preview{
                background-image:url('../../assets/pro/l_bw_preview.svg');
            }

            &.img-search-to-img{
                background-image:url('../../assets/pro/l_img_search_to_img.svg');
            }

            &.download{
                background-image:url('../../assets/pro/l_download.svg');
            }
            &.like-btn{
                background-image:url('../../assets/pro/l_img_like.svg');
            }
            
            &:hover{
                background-color:#ddd;
            }
        }
        .img-component .top-bar .top-back{
            border-radius:16px;
            background-color:#F1F2F4;
            background-image:url('../../assets/pro/l_gminfo_topback.svg');
            background-size:22px;
            background-position: center;
            &:hover{
                background-color:#ddd;
            }
        }
        .search-by-image-result-page .layout-left .top-row{
            background-color:#FBFCFD;
        }
        .game-info-cate-page-next,.cate-page-next{
            background: url('../../assets/pro/l_gmTag_right_label_arrow.svg') no-repeat;
            background-position: right center;
        }
        .game-info-cate-page-prev,.cate-page-prev{
            background: url('../../assets/pro/l_gmTag_right_label_arrow_l.svg') no-repeat;
            transform: rotate(0deg);
            background-position: left center;
        }
        .game-page .center-info .panel-tit .other-ops{
            .fav-btn,.share-btn{
                border-color:#9A9A9C;
                color:#52565A;
            }
        }
        .notice .tip-notice-panel .tnp-wrap .tnp-tab a.active{
            color:#191C1E;
        }
        .notice .tip-notice-panel .tnp-wrap .tnp-panel-con li .tnp-con-lt .title-basic .name{
            color:#191C1E;
        }
        .notice .tip-notice-panel .tnp-wrap .tnp-panel-con li .tnp-con-lt .title-basic .desc .dtxt,.notice .tip-notice-panel .tnp-wrap .tnp-panel-con li .tnp-stime{
            color:#52565A;
        }
        .pro-header .hr-area .user-avatar .user-panel-box .wrap{
            background-color:#FBFCFD;
        }
        .notice .tip-notice-panel .tnp-wrap{
            background-color:#fff;
            .tnp-footer{
                border-color:#ddd;
                color:#52565A;
            }
        }
        .info-right-bar{
            .text{
                color:#191C1E;
            }
            .rbtm:not(.active){
                &.take-top{
                    background:url('../../assets/pro/l_take_top.svg') no-repeat;
                }
                &.fav-btn{
                    background:url('../../assets/pro/l_fav.svg') no-repeat;
                }
                &.zan-btn{
                    background:url('../../assets/pro/l_zan.svg') no-repeat;
                }
                &.comment-btn{
                    background:url('../../assets/pro/l_comment.svg') no-repeat;
                }
            }
            
            .rbtm.active{
                &.fav-btn{
                    background:url('../../assets/pro/l_fav_active.svg') no-repeat;
                }
                &.zan-btn{
                    background:url('../../assets/pro/l_zan_active.svg') no-repeat;
                }
            }
        }
        .notice .tip-notice-panel .tnp-wrap .tnp-footer .a-view-all{
            background-image:url('../../assets/pro/l_m_arrow.svg');
        }
        .game-page .center-info .zan-row .zan-btn{
            background-color:#11CCB1;
            &.active{
                background-image:url('../../assets/pro/l_bot_zan_active.svg');
            }
        }
        .call-box .left-persons .call-mini-tip{
            color:#52565A;
        }
        .call-types .call-type{
            background-color:#FBFCFD;
            .num{
                color:#52565A;
            }
        }
        .game-page .center-info .new-zans .text{
            color:#52565A;
            &:before{
                background-color:#9A9A9C;
            }
            &:after{
                background-color:#9A9A9C;
            }
        }
        .game-page .game-top{

            &.is-gm-self-pg:after{
                background: radial-gradient( 70% 68% at 54% 9%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 6%, rgba(255,255,255,0.8) 100%);
                backdrop-filter: saturate(180%) blur(16px);
            }
            .basic{
                .game-tags{
                    a{
                        background-image:url('../../assets/pro/l_tag_arrow.svg');
                        background-color:#F1F2F4;
                        color:#52565A;
                        &:hover{
                            background-color:#E2E2E2;
                        }
                    }
                }
                .company{
                    color:#52565A;
                }
                .g-title{
                    color:#191C1E;
                    text-shadow: none;
                }
                .plateform{
                    color:#52565A;
                }
                .user{
                    .uname{
                        color:#191C1E;
                    }
                }
                .sub-desc{
                    color:#52565A;
                }
                .game-desc-tit{
                    color:#52565A;
                }
                .game-desc{
                    *{
                        color:#171717 !important;
                    }
                }
            }
        }
        &.info-detail-page{
            &.is-game{
                &:not(.is-scroll){
                    .pro-header{
                        &:not(.active){
                            .search-bx{
                                border-color:rgba(255,255,255,0.5);
                                form{
                                    background-color:rgba(255,255,255,0.5);
                                    border-color:rgba(255,255,255,0.5);
                                    padding-left:0px;
                                    input{
                                        background-color:rgba(255,255,255,0.5);
                                        height:100%;
                                        padding-left:48px;
                                    }
                                }
                            }
                        }
                        
                        .main-navs .nav{
                            color:#fff !important;
                            &.cur{
                                color:#11ccb1 !important;
                            }
                        }
                    }
                }
            }
            .hidden-sidbar{
                padding-left:0px !important;
            }
            // .pro-header{
            //     background-color:inherit;
            // }
            &.is-scroll{
                .pro-header{
                    background-color:#FBFCFD;
                }
            }
        }
        .pro-marquee-comments .send-mbox .right input{
            background: rgba(47,49,61,0.21);
            color:#191C1E;
        }
        .single-call-btn .text{
            color:#52565A;
        }
        .recruit-page .recruit-page-conbox .layout-box .right .publish-box{
            background-color:#F1F2F4;
            .text{
                color:#191C1E;
            }
        }
        .recruit-page .recruit-page-conbox{
            .filter .other{
                .pro-work-elcascader input{
                    border-color:#F1F2F4 !important;
                    background-color:#F1F2F4 !important;
                    &::placeholder{
                        color:#52565A !important;
                    }
                }
            }
            .layout-box .left .job-item{
                background-color:#F1F2F4;
                border-color:#F1F2F4;
                &:hover{
                    border-color:#11CCB1;
                }
                .job-l{
                    .basic{
                        .pos-name{
                            color:#191C1E;
                        }
                    }
                }
                .jo-pro-item{
                    span{
                        &:last-child{
                            color:#52565A;
                        }
                    }
                }
            }
        }
        .nav-cates li{
            background-color:#F1F2F4;
            color:#52565A;
            &.active-color{
                background-color:#E2E2E2;
                color:#191C1E;
            }
            &:hover{
                background-color:#E2E2E2;
                color:#191C1E;
            }
        }
        .mk-cus-ddl .cur{
            background-color:#F1F2F4;
            color:#191C1E;
            border-color:#F1F2F4;
        }
        .uhome .basic-data .d-tit{
            color:#191C1E;
            font-weight: bold;
        }
        .uhome .basic-data .bdata-panel .item label{
            color:#191C1E;
        }
        .uhome .basic-data .bdata-panel .item .val-text{
            color:#52565A;
        }
        .uhome .basic-data{
            background-color:#F1F2F4;
        }
        .pro-header .hr-area .release-plus .sub-dd-block .sub-ddls{
            background-color:#fff;
            li{
                a{
                    color:#191C1E;
                    &:hover{
                        background-color:#F1F2F4;
                    }
                }

                &.f-game-pic-btn .rv{
                    background-image:url('../../assets/pro/l_shangchuanyouxijietu_icon.svg');
                }
                &.f-work-btn .rv{
                    background-image:url('../../assets/pro/l_f_zuopin_icon.svg');
                }
                &.f-article-btn .rv{
                    background-image:url('../../assets/pro/l_f_article_icon.svg');
                }
            }
        }
        .pro-header .search-bx .pic-to-pic{
            background-image:url('../../assets/pro/l_pic_to_pic_icon.svg');
        }
        .hot-row li .is-adv{
            background-color:#F1F2F4;
            color:#B4B4B4;
        }
        .pro-header .hr-area .user-avatar .user-panel-box .wrap .num-statistics-box a{
            background-color:#F1F2F4;
            &:hover{
                background-color:#c9c9c9;
                background-image:inherit;
                .txt{
                    color:#191C1E;
                }
            }
            .ncount{
                color:#52565A;
            }
            &.a-my-realease {
                &:hover {
                  background-image: url('../../assets/pro/l_a_my_realease_cus_icon.svg');
                }
              }
  
            &.a-my-parise {
                &:hover {
                  background-image: url('../../assets/pro/l_a_my_parise_cus_icon.svg');
                }
              }
  
              &.a-my-fav {
                &:hover {
                  background-image: url('../../assets/pro/l_a_myfav_cus_icon.svg');
                }
              }
  
              &.a-my-bw-history {
                &:hover {
                  background-image: url('../../assets/pro/l_a_bw_myhistory_icon.svg');
                }
              }
        }
        .pro-header .hr-area .user-avatar .user-panel-box .wrap .mg-items a{
            color:#52565A;
            &:hover{
                color:#191C1E;
            }
        }
        .pro-header .hr-area .user-avatar .user-panel-box .wrap .basic-uinfo .basic-info .name{
            color:#191C1E;
        }
        .bal-tit .random-change,.recommend-page .recommend-tab .change-random-btn{
            background-color:#F1F2F4;
        }
        .article-single-page .wp-content-lft .works-tab{
            background-color:#FBFCFD;
        }
        .rank-page .rank-l .top{
            background-color:#FBFCFD;
        }
        .works-list-page .games-data .dx-vd-item, .article-list-page .games-data .dx-vd-item,.games-data .dx-vd-item
        {
            background-color:#F1F2F4;
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
            }
            .bot-author{
                color:#52565A;
            }
        }
        .rank-page .rank-l{
            .content-list-area .item{
                background-color:#F1F2F4;
                .basic{
                    .title{
                        color:#191C1E;
                    }
                    .bot{
                        .tags{
                            .tag{
                                background-color:#ddd;
                            }
                        }
                    }
                }
            }
            &::-webkit-scrollbar-thumb{
                background-color:#626262;
            }
        }
        .rank-page .list-box{
            background-color:#F1F2F4;
            .list-item{
                .basic{
                    .name{
                        color:#191C1E;
                    }
                    .nums{
                        .num{
                            i{
                                color:#52565A;
                            }
                        }
                    }
                }
            }
        }
        .article-single-page .wp-content-rt .rank-datas{
            background-color:#F1F2F4;
            li{
                .rk-d-rft{
                    .bot-d{
                        .tags{
                            .tag{
                                background-color:#ddd;
                            }
                        }
                    }
                    .tit{
                        color:#191C1E;
                    }
                }
            }
            .view-more{
                border-color:#ddd;
            }
        }
        .hot-gx-data{
            background-color:#F1F2F4;
            .item{
                .u-box{
                    .basic-box{
                        .tit{
                            color:#191C1E;
                        }
                        .num-b{
                            b{
                                color:#52565A;
                            }
                        }
                    }
                }
            }
            .view-more{
                border-color:#ddd;
            }
        }
        .article-single-page .wp-content-lft .work-datas .wk-d-item{
            background-color:#F1F2F4;
            .u-bot{
                .at-basic{
                    .tit{
                        color:#191C1E;
                    }
                    .other{
                        color:#52565A;
                    }
                }
            }
        }
        .following-page .games .fav-d-item{
            background-color:#F1F2F4;
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
                .type-text{
                    border-color:#dbdbdb;
                }
            }
            .bot-author{
                color:#52565A;
            }
        }
        .following-page .sub-page-tit .txt,.following-page .m-at-con-wrap .cover-all .title{
            color:#52565A;
        }
        .search-page .gp-filter .search-by-type a,
        .rank-page .rank-l .top-line .top-tabs a,
        .article-single-page .wp-content-lft .works-tab a,
        .my-likes-page .mk-filter-row .tab a,
        .collections-page .fav-tab a,
        .following-page .top-tabs a,
        .recommend-page .recommend-tab a{
            &:hover{
                color:#191C1E;
            }
            &.active
            {
                color:#191C1E;
            }
        }
        .bs-g-flabel.gpic-clr{
            background-color:#F1F2F4;
            .cur{
                background-color:#F1F2F4;
                color:#191C1E;
            }
        }
        .bs-layout{
            background-color:#F1F2F4;
        }
        .bs-g-flabel{
            background-color:#F1F2F4;
            color:#52565A;
        }
        .all-games .data-wrap.big .bdl-data-item,.game-list-page .games-data.big .gd-item, .games-page .games-data.big .gd-item{
            background-color:#F1F2F4;
            .basic-info{
                .title{
                    color:#191C1E;
                }
                .bot-desc{
                    color:#52565A;
                    .name-text{
                        color:#52565A;
                    }
                }
            }
        }
        .search-page .gp-filter,.nav-sticky{
            background-color:#FBFCFD;
        }
        .search-page .list-wrap.wk-list-area .list-box .bdl-data-item{
            .bot-desc{
                .file-name{
                    color:#191C1E;
                }
            }
            .bot-author{
                .u{
                    .name{
                        color:#52565A;
                    }
                }
                color:#52565A;
            }
        }
        .search-page .list-box .bdl-data-item{
            background-color:#F1F2F4;
            .title-row{
                .title{
                    color:#191C1E;
                }
            }
            .u-row{
                color:#52565A;
            }
        }
        .ptop-cate{
            background-color:#FBFCFD;
        }
        .seach-bx{
            background-color:#F1F2F4;
        }
        .q-f-item-wrap{
            background-color:#F1F2F4;
            input{
                background-color:#F1F2F4;
                color:#848393;
            }
        }
        .pro-header .search-bx .xg-kj{
            background:url('../../assets/pro/l_xg_icon.svg') no-repeat;
        }
        .notice{
            background:url('../../assets/pro/l_notice.svg') no-repeat;
            background-position: center;
        }
        .left-nav .navs .split-empty{
            background:#DDD;
        }
        .left-nav .navs li a{
            color:#52565A;
            &.active{
                color:#11CCB1;
            }
            &.ai{
                background:url('../../assets/pro/l_ai_menubg.svg') no-repeat;
                background-position:left center;
                &:after{
                    background:url('../../assets/pro/l_icon_qxy.svg') no-repeat;
                    background-size:cover;
                }
            }
            &:hover{
                color:#11CCB1;
            }
        }
        }
        .n-dialog-container{
            background:#F9F9F9;
        }
        .private-letter-modal{
            .prv-rt-modalcon{
                .prvrt-header{
                    .tit{
                        color:#191C1E;
                    }
                }
                .sys-notice-data{
                    ul{
                        background:#F9F9F9;
                        li{
                            .tit{
                                color:#191C1E;
                                .collapse-btn{
                                    background-image:url('../../assets/pro/l_msg_collapse.svg');
                                }
                            }
                        }
                    }
                }
            }
            .prv-lt{
                background:#fff;
                .tit{
                    color:#191C1E;
                }
                .prv-ul-data{
                    li{
                        &.cur{
                            background-color:#F1F2F4;
                            .info-tit{
                                color:#191C1E;
                            }
                        }
                        &:hover{
                            background-color:#F1F2F4;
                        }
                        .info-tit{
                            color:#191C1E;
                        }
                        .info{
                            .info-tit{
                                color:#191C1E;
                            }
                            .desc{
                                color:#52565A;
                            }
                        }
                    }
                }
            }
        }
    }
    
    html.dark{
        background:#1D1C1B;
        .nine-home-panel-header .tit{
            color:#fff;
        }
        .collections-page .fav-datas .fav-d-item,.browse-records .games-data .dx-vd-item,.collections-page .fav-datas .fav-d-item,.following-page .users .user-item,.following-page .games .fav-d-item{
            background: #171717;
        }
        .them-area{
            background-image:url('../../assets/pro/theme_dark.svg');
            background-repeat: no-repeat;
            background-size:24px;
            background-position:center;
        }
        .pic-to-pic-win-control{
            background:#FBFCFD;
        }
        .mgbox-1 .games-data .dx-vd-item,.mgbox-4 .games-data .dx-vd-item{
            background-color:#242327;
            .bot-author{
                color:#969696;
            }
        }
        .nine-search-tab-top ul>.el-dropdown .el-dropdown-link, .n-work-filter-area .right >.el-dropdown .el-dropdown-link{
            color:#fff;
        }
        .nine-home-covers li.empty{
            color:#1D1C1B;
        }
        .new-pageation-btn a,.n-view-btn{
            background-color:#302E33;
            border-color:#302E33;
        }
        .n-work-panel-tit{
            color:#fff;
        }
        .nine-home-search .search-by-pic,.n-h-s-type-nav{
            color:#1D1C1B;
        }
        .nine-home-search input{
            color:#1D1C1B;
        }
        .global-keyword-searchs .searchs-item{
            color:#1D1C1B;
        }
        .nine-home-panel-header .tit-desc{
            color:#9A9A9C;
        }
        .bodyView{
            &.info-detail-page{
                &.is-game{
                    &:not(.is-scroll){
                        .pro-header{
                            &:not(.active){
                                .search-bx{
                                    border-color:rgba(48,46,51,0.5);
                                    form{
                                        background-color:rgba(48,46,51,0.5);
                                        border-color:rgba(48,46,51,0.5);
                                        padding-left:0px;
                                        input{
                                            background-color:rgba(48,46,51,0.5);
                                            height:100%;
                                            padding-left:48px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            } 
        }
        .nine-home-covers li{
            border-color:#1D1C1B;
        }
        .game-page .game-top .basic .user .follow{
            background:none;
            color:#fff;
            border-color:#fff;
        }
        .filter-by .sub-cates li:not(.view-btn,.active):before{
            background-image:url('../../assets/pro/l_cate_default.svg');
        }
        .game-page .game-desc *{
            color:#EAEAEA !important;
            background-color:#1D1C1B !important;
        }
        .game-page .game-top .basic .game-tags li a{
            background-color: rgba(47,49,61,0.8);
        }
        .game-page .game-top .g-basic .basic .basic-game-info .time,.game-page .game-top .g-basic .basic .basic-game-info .cate-desc{
            color: rgba(255,255,255,0.7);
        }
        .main-navs .nav{
            color:#9A9A9C;
            &.cur{
                color:#11ccb1;
            }
        }
        .pro-header .hr-area .user-avatar .user-panel-box .wrap .mg-items a:not(:last-child){
            border-color:#52565A;
        }
        .n-h-hot-games li{
            border-color:#52565A;
        }
        .homes .home-tabs{
            a{
                color:#969696;
                &.active{
                    background-color:#363539;
                    color:#fff;
                }
            }
        }
        .info-detail-page.is-scroll .pro-header, .is-publish-sub-page.is-scroll .pro-header{
            background-color: #1D1C1B !important;
        }
        
        .sys-logo{
            // height: 38.73px;
            // width:120px;
            img{
                // height:100%;
                height:auto;
                width:120px;
                object-fit:contain;
            }
        }
        .game-page .game-top{
            &.is-gm-self-pg:after{
                // background: radial-gradient( 71% 69% at 54% 9%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, #1D1C1B 100%);
                background: radial-gradient( 69% 68% at 54% 9%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 6%, rgba(29,28,27,0.8) 100%);
                backdrop-filter: saturate(180%) blur(16px);
            }
        }
        .list-data-box .selected-filters .q-f-item{
            background-color:#1D1C1B !important;
        }
        .list-wrap-flex .search-area{
            background-color:#242327 !important;
        }
        .list-wrap-flex .search-area .filter-by{
            background-color:#2A292D !important;
        }
        .list-data-box .top-filter-area .filter .switch-type-box{
            background-color:#242327;
            a{
                background-color:#242327;
                color:#969696;
                &.active{
                    background-color:#2A292D;
                    color:#fff;
                }
            }
        }
        .list-wrap-flex .search-area .seach-bx{
            background-color:#2A292D !important;
            border-color:#3E3C44 !important;
            form{
                background-color:#2A292D;
            }
            input{
                background-color:#2A292D;
                color:#fff;
            }
        }
        .filter-by .cates > li{
            border-color:#2A292D;
            .cate-name{
                &:hover{
                    background-color:#302E33 !important;
                }
            }
        }
        .bodyView{
            background:#1D1C1B;

        .ald-ba-data .data-wrap .bdl-data-item .basic-info .bot-desc{
            color:#969696;
        }
        .pro-header,.bodyView,body,.left-nav,.content-box,.ptop-cate,.gp-filter,.article-single-page .wp-content-lft .works-tab,.nav-sticky,.rank-page .rank-l .top,.comp-article-page,.comm-comment,.img-component,.search-by-image-result-page .layout-left .top-row{
            background: #1D1C1B;
        }
        .pro-marquee-comments .send-mbox .right input{
            background: rgba(255,255,255,0.1);
        }
        .other-main .games-data .dx-vd-item,
        .search-page .gp-filter .seach-bx,
        .game-list-page .games-data .gd-item, 
        .games-page .games-data .gd-item,
        .bs-layout,.bs-g-flabel,.mk-cus-ddl .cur,
        .q-f-item-wrap,.gp-filter .seach-bx input,
        .all-games .data-wrap .bdl-data-item,
        .article-single-page .wp-content-lft .work-datas .wk-d-item,
        .article-single-page .wp-content-rt .rank-datas,
        .hot-gx-data,.uhome > .user,.uhome .topbar,
        .publish-nav-menus,.rank-page .rank-l .content-list-area .item,
        .rank-page .list-box,
        .follow-exclusive-settings .fans-datas .fans-item,
        .follow-exclusive-settings .users .user-item,
        .search-page .list-box .bdl-data-item,
        .article-list-page .games-data .dx-vd-item, 
        .works-list-page .games-data .dx-vd-item{
            background-color:#242327;
        }
        .filter-by{
            background:#242327;
        }
        .pro-header{
            .search-bx {
                form{
                    background-color: #302E33;
                    // background-color:rgba(48,46,51,0.5);
                    input{
                        background-color:#302E33;
                        // background-color:rgba(48,46,51,0.5);
                        // height:100%;
                    }
                }
            }
        }
        .nav-cates li{
            background:#242327;
            &.active-color {
                color: #fff;
                background: #363539;
            }
        }
        }
        .near-by-articles .wp-1432{
            border-color:#302E33;
        }
    }
// }

.is-publish-sub-page{
    .layout-container{
        .publish-nav-menus{
            position: fixed;
            z-index: 11;
            left: 30px;
        }
    }
}
.info-detail-page,.is-publish-sub-page{
    .pro-header{
        background:inherit;
    }
    &.is-game{
        .pro-header{
            background-color: inherit !important;
        }
        .layout-container{
            .content-box{
                padding-top:0px;
                padding-right:0px;
                padding-left:0px;
            }
        }
    }
    &.is-works{
        .layout-container{
            .content-box{
                // padding-top:0px;
                padding-right:0px;
                padding-left:0px;
            }
        }
    }
    &.is-scroll{
        .pro-header{
            background: #1D1C1B;
            background-color: #FBFCFD !important;
        }
    }
    .left-nav{
        left:-240px;
        transition:left .2s ease-in;
        width:240px !important;
        position:fixed;
        background-color:#FBFCFD;
        top:0px;
        height:100%;
        direction:ltr;
        bottom:0px;
    }
    &.fix-sid-bar{
        .menu-mask{
            // z-index:116;
            // opacity:1;
            visibility: visible;
        }
        
        .publish-nav-menus{
            z-index:-1 !important;
            opacity:0;
        }
        // .hidden-sidbar{
        .left-nav{
            // z-index:11112;
            left:0px;
            // padding-top:22px;
            // width:240px;
            // z-index:11112;
            // position:fixed;
            // background-color:#FBFCFD;
            // left:0px;
            // top:0px;
            // height:100%;
            // bottom:0px;
            .navs,.bot{
                display: inherit;
            }
            .hed-left{
                display: flex;
                margin-bottom:18px;
            }
            // .bot{
            //     display: flex;
            // }
        }
        .collapse-nav{
            display: none !important;
        }
        // }
    }
}
.gp-filter .gp-img-layout{
    .mk-cus-ddl{
        height:44px;
        .cur{
            line-height:44px;
            height:44px;
        }
    }
    .seach-bx{
        input{
            height:44px;
            line-height:44px;
        }
    }
}
.hidden-sidbar{
  padding-left:96px !important; 
  overflow-x:hidden;
  .left-nav{
    width:96px;
    direction:inherit;
    .navs,.bot{
        display: none;
    }
    .collapse-nav{
        display: flex;
        flex-direction:column;
        grid-gap:38px;
            a{
                display: flex;
                justify-content: center;
                flex-direction:column;
                text-align: center;
                color:#969696;
                &:before {
                    content: '';
                    background-position: left center;
                    width:24px;
                    height: 24px;
                    display: block;
                    // margin-right: 20px;
                    transition:.1s all linear;
                    margin-bottom:4px;
                    margin:0 auto 4px auto;
                }
                &.active{
                    color:#11CCB1;
                }
                &:hover{
                    color:#fff;
                }
            }
            .home {
            &:before {
                background: url('../../assets/pro/leftNav/button_normal_home.svg') no-repeat;
                background-size:cover;
                background-position:center;
            }
            &.active:before {
                background: url('../../assets/pro/leftNav/menu/active/button_press_home.svg') no-repeat;
                background-size:cover;
            }
            }
            .yx {
            &:before {
                background: url('../../assets/pro/leftNav/button_normal_yx.svg') no-repeat;
                background-size:cover;
            }
            &.active:before {
                background: url('../../assets/pro/leftNav/menu/active/button_press_game.svg') no-repeat;
                background-size:cover;
            }
            }
            
            .ai{
            &:before{
                background:url('../../assets/pro/new_ai.svg') no-repeat;
                background-size:39.21px 15.43px;
                width:39.21px;
            }
            }
            .jt {
            &:before {
                background: url('../../assets/pro/leftNav/button_normal_jt.svg') no-repeat;
                background-size:cover;
            }
            &.active:before {
                background: url('../../assets/pro/leftNav/menu/active/button_press_jietu.svg') no-repeat;
                background-size:cover;
            }
        }
    }
  }
}

.data-ul {
    &.no-flx-wrap {
        flex-wrap: nowrap !important;
    }

    &.colors {
        .active {
            a {
                transition: none !important;
                background-image: url('../../assets/pro/clr_active.svg') !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
            }
        }
    }
}

.w-240 {
    width: 240px;
}

.games-filter-wrap {
    &.pd-fill {
        padding-bottom: 30px !important;
    }
}

@keyframes animcallimg {
    0% {
        transform: translateY(-36px) translateX(5px) scale(1);
        // opacity:1;
    }

    20% {
        transform: translateY(-66px) translateX(5px) scale(.7);
        // opacity:.8;
    }

    40% {
        transform: translateY(-96px) translateX(5px) scale(.4);
        // opacity:.6;
    }

    60% {
        transform: translateY(-126px) translateX(5px) scale(0);
        // opacity:.4;
    }

    100% {
        transform: translateY(-156px) translateX(5px) scale(0);
        // opacity:0;
    }
}

.center-info {
    // overflow-x: hidden;
}

.select-btn {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
    background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
    background-size: cover;

    &.active {
        background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
        background-size: cover;
    }
}

.d-call-img {
    transition: .2s all linear;
    transform: translateY(0px);
    animation: animcallimg 1.5s linear infinite;
}

.has-filter-scroll {
    overflow-y: auto;
}

/* 定义淡出动画 */
@keyframes pfadeIn {
    from {
        /* 动画开始时 */
        transform: translate3d(0px, 3000px, 0px);
    }

    to {
        /* 动画结束时 */
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

.zwf-el {
    // height: 20px;
    // position: sticky;
    // top: 149px;
    // z-index: 12;
    // background: #111;
    // display: inline-block;
}

.el-loading-text {
    font-size: 16px !important;
    color: #b3b2c5 !important;
}

.el-icon-loading {
    color: #f5f5f5 !important;
}

.stick-box {
    position: sticky;
    // top: 84px;
}

.el-popover {
    background: #242327;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
    border: none;

    .popper__arrow {
        border-bottom-color: #242327 !important;

        &:after {
            border-bottom-color: #242327 !important;
        }
    }
}

.el-popper[x-placement^=top] .popper__arrow {
    border-top-color: #242327 !important;

}

.el-popper[x-placement^=top] {
    .popper__arrow:after {
        border-top-color: #242327 !important;
    }
}

.follow-page-prev {
    background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 66px;
    height: 66px;
    transform: rotate(180deg);
    z-index: 1;
    left: -30px !important;
    top: 34px;
    border-radius: 8px;
    opacity: .8;
    transition: .2s all linear;

    &:after {
        display: none;
    }

    &:hover {
        background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
        background-size: cover;
        opacity: 1 !important;
    }
}

.follow-page-next {
    background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 66px;
    height: 66px;
    z-index: 1;
    top: 34px;
    border-radius: 8px;
    right: -86px;
    opacity: .8;
    transition: .2s all linear;

    &:after {
        display: none;
    }

    &:hover {
        background: url('../../assets/pro/more_right_arrow.svg') no-repeat;
        background-size: cover;
        opacity: 1 !important;
    }
}

.el-cascader {
    .el-input__inner {
        background: #1C1C1E !important;
        border-color: #23232A !important;
    }
}

.game-info-cate-page-prev {
    background: url('../../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
    width: 80px;
    height: 38px;
    transform: rotate(180deg);
    z-index: 1;
    top: 22px;
    left: 0px !important;

    &:after {
        display: none;
    }

    &:hover {
        background: url('../../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
        opacity: .9 !important;
    }
}

.game-info-cate-page-next {
    background: url('../../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
    width: 80px;
    height: 38px;
    z-index: 1;
    top: 22px;
    right: 0px;

    &:after {
        display: none;
    }

    &:hover {
        background: url('../../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
        opacity: .9 !important;
    }
}

.game-tags {
    border-radius: 38px;
    overflow: hidden;
}

.flb-r-color-box {
    border: 1px solid #DEDEE6;
    border-radius: 12px;
    height: 44px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 6px 0px;
    width: 360px;
    // background-image: url('../../assets/eleven/color_search.png');
    background-repeat: no-repeat;
    background-position: 13px;
    padding-left: 31px;
    background-color: #EBEDF5;
    position: relative;

    input {
        outline: 0;
        border: none;
        padding: 0px 10px;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        background-color: #EBEDF5;

        &:focus {
            border: none !important;
        }
    }

    .color-filter {
        min-width: 72px;
        border-left: 1px solid #D8DBEB;
        height: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;

        &:after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 9px;
            // background: url('../../assets/eleven/color_circle.png') no-repeat;
            background-size: 16px 9px;
            margin-left: 10px;
        }

        .common-icon-clear-inp {
            position: absolute;
            right: -5px;
        }
    }

    .no-after {
        &:after {
            display: none;
        }
    }

    .cur-color-val {
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-left: 12px;
        border-radius: 24px;
    }

    .cur-color-default-val {
        // background: url('../../assets/eleven/color_default_sel.png') no-repeat;
        background-size: cover;
    }

    .el-color-picker {
        border: 1px solid red;
        width: 72px;
        position: absolute;
        right: 0px;
        opacity: 0;

        .el-color-picker__trigger {
            border: 1px solid red;
            width: 100%;
        }
    }
}


body {
    width:100% !important;
    color: #fff;
    box-sizing: border-box;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font: 14px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    a {
        color: inherit;

        &:hover {
            color: inherit;
        }
    }
}


@keyframes hdpanel {
    0% {
        transform: scaleY(.95);
        transform-origin: top;
        opacity: 0
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1
    }

    // 0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}
}


.layout-container {
    .game-con-info {
        z-index: 115 !important;
        // transform: translate3d(0px, 3000px, 0px);
        // animation: pfadeIn .5s ease-in-out forwards;
        .info-detail-mask {
            // z-index: 114;
            // background: rgba(0, 0, 0, 0.6);
            // -webkit-backdrop-filter: saturate(180%) blur(16px);
            // backdrop-filter: saturate(180%) blur(16px);
        }
        .game-info {
            z-index: 114 !important;
        }
    }
}
.mk-rd-datas{
    overflow-x:hidden;
    .vue-waterfall{
        // width:101%;
        // margin-left: -1%;
    }
}
.info-detail-mask {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 101;
    width: 100%;
    height: 100%;
    animation: opacity .2s ease-in;
    cursor: pointer;

    // background: rgba(0, 0, 0, 0.6);
    // -webkit-backdrop-filter: saturate(180%) blur(16px);
    // backdrop-filter: saturate(180%) blur(16px);
    // &:before{
    //     content:'';
    //     background: rgba(0, 0, 0, 0.6);
    //     -webkit-backdrop-filter: saturate(180%) blur(16px);
    //     backdrop-filter: saturate(180%) blur(16px);
    //     height:45px;
    //     width:100%;
    //     display: block;
    // }
    &:hover{
        // backdrop-filter: saturate(180%) blur(0px);
        + .game-info{
            margin-top:65px !important;
            // margin-top:65px;
            // transform:translateY(20px);
            // border:1px solid red;
            .game-page,.comp-article-page{
                height: calc(-65px + 100vh);
            }
        }
    }
}
.el-drawer__wrapper{
    // background: rgba(0, 0, 0, 0.6);
    // -webkit-backdrop-filter: saturate(180%) blur(16px);
    // backdrop-filter: saturate(180%) blur(16px);
    // transition:all .2s ease;
}
.el-drawer__container{
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    transition:all .2s ease;
    // z-index:100;
    &:hover{
        // background:inherit;
        .el-drawer{
            min-height: calc(-65px + 100vh) !important;
            height: calc(-65px + 100vh) !important;
            // backdrop-filter: saturate(180%) blur(0px);
        }
    }
}

@keyframes btt-drawer-in {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0, 0)
    }
}

.el-drawer__open .el-drawer.btt {
    animation: btt-drawer-in .2s ease-in;
}

.el-drawer {
    min-height: calc(-45px + 100vh) !important;
    height: calc(-45px + 100vh) !important;
    background: #111;
}

.ant-message {
    z-index: 10001;
}

.ant-modal {
    padding-bottom: 0px;
    overflow: hidden;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
}

.ant-modal-body {
    padding: 0px;
}

.ant-modal-content {
    background-color: inherit;
}

.ant-modal-mask {
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
}


.f-type-row {
    // background:#171717;
    padding-top: 8px;
    // height: 20px;
    // border-bottom-left-radius:16px;
    // border-bottom-right-radius:16px;
    padding-left: 15px;

    .f-type {
        // opacity:.14;
        line-height: 20px;
        font-size: 10px;
        padding: 0px 4px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        overflow: hidden;

        &:before {
            content: '';
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            height: 100%;
        }

        // margin-left:19px;
        &.ftp_1 {
            color: #725959;

            &:before {
                background: rgba(228, 36, 82, .14);
            }
        }

        &.ftp_0 {
            color: #726659;

            &:before {
                background: rgba(#E49424, .14);
            }
        }

        &.ftp_2 {
            color: #4A5A4B;

            &:before {
                opacity: 0.14;
                background: rgba(54, 228, 36, 0.54);
            }
        }
    }
}

.sub-desc-more{
    padding-right:15px;
    font-size:14px;
    color:#11CCB1;
    display: flex;
    align-items: center;
    user-select: none;
    &:hover{
        color:#11CCB1;
    }
    &:after{
        content:'';
        background:url('../../assets/pro/sub_desc_more.svg') no-repeat;
        width:12px;height:12px;
        background-size:12px 12px;
        transition:.2s all linear;
    }
    &.collapse{
        &:after{
            transform: rotate(180deg);
        }
    }
}
.bodyView{
    &:not(.b-has-adv){
        .layout-container{
            .content-box{
                padding-top:84px;
            }
        }
    }
    .layout-container {
        // max-width: 1920px;
        // max-width:calc(100% - 240px);
        max-width:100%;
        // padding-left:240px;
        display: flex;
        // margin: 0 auto;
    
        .left-nav {
            // min-width:240px;
            // position:sticky;
            // top:0px;
        }
        .content-box{
            width:100%;
            // padding-top:84px;
            padding-left:38px;
            padding-right:20px;
        }
    }
    &.is-gm-home{
        .layout-container{
            .content-box{
                padding-top:0px;
            }
        }
    }
    
    &.is-game{
        .layout-container{
            .content-box{
                padding-top:0px;
            }
        }
    }
    &.b-has-adv{
        &.is-gm-dt .layout-container{
            .content-box{
                padding-top:0px;
                margin-top:60px;
            }
        }

        .publish-nav-menus{
            top:144px;
        }
        
        &.is-gm-home .layout-container{
            .content-box{
                padding-top:0px;
                margin-top:60px;
            }
        }
        &:not(.is-game) .layout-container{
            .content-box{
                padding-top:0px;
                margin-top:144px;
            }
        }
        .rank-page .rank-r{
            max-height: calc(100vh - 110px - 60px);
        }
        .rank-page .rank-r,.rank-page .rank-l .top,.work .right-con-box{
            top:144px;
        }
        .search-by-image-result-page .layout-right{
            top:144px;
        }
        .works-tab{
            top:144px;
        }
        .gp-filter{
            top:144px;
        }
        .wp-content-rt{
            top:144px;
        }
        .list-wrap-flex{
            .search-area{
                top:144px;
            }
        }
        .list-data-box{
            .fixed-wrap{
                top:144px;
            }
        }
        .work .left-con{
            .first-scroll{
                max-height:calc(100vh - 144px);
            }
        }
    }
    &.is-home .layout-container{
        .content-box {
            width:100%;
            padding-left:0px;
            padding-top:0px;
            padding-right:0px;
            color: #fff;
            min-height: calc(100vh - 40px);
        }
        &.is-home{
    
        }
    }
}

.sender-txt{
    .el-textarea__inner {
        background: #242327;
        width: 100%;
        // border: none;
        // height:44px;
        // line-height: 44px;
        padding-left: 16px;
        font-size: 14px;
        color: #fff;
        border-radius: 8px;
        padding: 10px;
        resize: none;
        border: 1px solid transparent;
    
        &:focus {
            border: 1px solid #11CCB1;
        }
    }
    &.is-fnew{
        .el-textarea__inner{
            border: 1px solid #11CCB1;
        }
    }
}
.sender-txt{
    textarea{
        padding-right:100px !important;
    }
    &.isp-pd{
        textarea{
            padding-bottom:44px !important;
            padding-right:0px !important;
        }
    }
}

.marquee-comments {
    position: absolute;
    left: 24px;
    bottom: 10px;
    max-height: 270px;
    overflow: hidden;
    transition: .3s all linear;
    z-index: 2;

    li {
        .main-item {
            cursor: pointer;
            min-height: 42px;
            margin-bottom: 10px;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            position: relative;
            align-items: flex-start;
            max-width: 275px;
            box-sizing: border-box;
            width: max-content;

            img {
                vertical-align: text-bottom;
                width: 17px;
                height: 17px;
                margin-right: 3px;
            }

            * {
                position: relative;
                z-index: 2;
            }

            &:after {
                content: '';
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
                z-index: 1;
            }

            .u-box {
                margin-right: 7px;
                margin-left: 3px;
                margin-top: 3px;
                position: relative;

                img {
                    min-width: 36px;
                    width: 36px;
                    height: 36px;
                    border-radius: 36px;
                    object-fit: cover;
                }

                .small-icon {
                    position: absolute;
                    right: -10px;
                    bottom: 0px;
                    width: 24px;
                    height: 24px;
                    min-width: 24px;
                    object-fit: contain;
                }
            }

            .cmt-work-bot {
                width: calc(100% - 43px);
                padding-right: 10px;

                .cm-con-top {
                    color: #fff;
                    align-items: center;
                    margin-top: 1px;

                    // display: flex;
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: left;

                    .reply-target-uname {
                        // background: url('../20220311/reply_cir.png') no-repeat;
                        background-size: 6px 9px;
                        background-position: left;
                        padding-left: 12px;
                        margin-left: 6px;
                    }
                }

                .cm-con-bot {
                    color: #fff;
                    font-size: 12px;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    padding-right: 12px;
                    overflow: hidden;
                    line-height: 20px;
                    text-align: left;
                }
            }
        }
    }
}

.marquee-comments-right {
    // left: inherit;
    // right: 20px;
    li {
        display: flex;
        justify-content: flex-end;

        .main-item {
            .u-box {
                margin-right: 0px;
            }

            .cmt-work-bot {
                padding-right: 0px;
                padding-left: 10px;

                .cm-con-top {
                    text-align: right;
                    min-width: 100px;
                }

                .cm-con-bot {
                    padding-right: 0px;
                }
            }
        }

        .auto-width {
            .u-box {
                margin-right: 10px !important;
            }
        }
    }

    .m-flex-wrap {
        flex-direction: column;
        align-items: flex-end;
    }
}

.third-mutiple-video-wrapper {
    width: 1630px;
    display: flex;
    justify-content: space-around;

    .video-box {
        width: 100%;
    }
}

.two-mutiple-video-wrapper {
    width: 1094px;
    display: flex;
    justify-content: space-around;

    .video-box {
        width: 100%;
    }
}

.mutiple-video-wrapper-max {
    width: 1670px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .video-box {
        width: 100%;
        margin: initial !important;
        margin-right: 20px !important;
    }

    .video-box:nth-child(3n) {
        margin-left: 0px !important;
    }
}


.new-kj-reply-form-container {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.has-f-t {
    position: relative;

    .sm-tip {
        border-radius: 4px;
        background: #353540;
        line-height: 18px;
        padding: 4px 7px;
        font-style: normal;
        font-size: 12px;
        position: absolute;
        top: -30px;
        left: -3px;
        visibility: hidden;
        white-space: nowrap;
    }

    &:hover {
        .sm-tip {
            visibility: visible;
        }
    }
}

.img-has-f-t {
    .sm-tip {
        border-radius: 4px;
        background: #353540;
        line-height: 18px;
        padding: 4px 7px;
        font-style: normal;
        font-size: 12px;
        position: absolute;
        top: -30px;
        left: -3px;
        color: #fff;
        visibility: hidden;
    }

    &:hover {
        .sm-tip {
            visibility: visible;
        }
    }
}

// ::-webkit-scrollbar {
//     width: 6px;
//     height: 6px;
//     background: transparent;
// }

// ::-webkit-scrollbar-thumb {
//     background: rgba(255, 255, 255, .3);
//     border-radius: 16px;
// }

// ::-webkit-scrollbar-track {
//     background: transparent;
// }

.info-right-bar {
    position: fixed;
    right: 65px;
    top: calc((100vh - 400px) / 2);
    // width: 70px;
    z-index: 113;
    display: flex;
    // flex-wrap: wrap;
    flex-direction: column;
    background: transparent;

    animation: opacity .2s ease-in;
    grid-gap:20px;
    .el-popover__reference-wrapper{
        display: flex;
    }
    .rbtm {
        width: 50px;
        height: 50px;
        position: relative;
        cursor: pointer;
        transition: .1s all linear;

        i {
            font-style: normal;
            font-size: 12px;
            text-align: center;
            position: absolute;
        }

        .num {
            background: #232323;
            line-height: 17px;
            border-radius: 9px;
            border: 1px solid #010101;
            padding: 0px 2px;
            font-size: 12px;
            position: absolute;
            top: 0px;
            right: -5px;
            min-width: 19px;
            font-style: normal;
        }

        .text {
            // top:50px;
            width: 100%;
            // margin-top:10px;
            bottom: -28px;
        }
    }

    .user {
        img {
            border-radius: 50px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .follow-btn {
            width: 24px;
            height: 24px;
            background: url('../../assets/pro/gameInfoRightBar/follow.svg') no-repeat;
            position: absolute;
            bottom: 0px;
            right: -8px;
        }
    }

    .support-btn {
        // height:80px;
        animation: ring 1.2s ease-in-out infinite;
        background: url('../../assets/pro/gameInfoRightBar/call.png') no-repeat;
        // &:before{
        //     content:'';
        //     background: url('../../assets/pro/gameInfoRightBar/call.png') no-repeat;
        //     background-size: cover;
        //     margin-top: 40px;
        //     width:50px;height:50px;
        //     display: block;
        //     position: absolute;
        //     transition:.2s all linear;
        //     top:-10px;
        // }
        &:hover{
            &:before{
                transform: scale(1.1);
            }
        }
        .num {
            background: linear-gradient(317deg, #FF58CE 0%, #11CCB1 100%);
            border-color: #fff;
            bottom: inherit;
        }
    }

    .comment-btn {
        background: url('../../assets/pro/gameInfoRightBar/comment.svg') no-repeat;
        background-size: cover;
        margin-top:30px;

        &:not(.active):hover {
            background: url('../../assets/pro/gameInfoRightBar/comment_hover.svg') no-repeat;
            background-size: cover;

            .num {
                background: #42404A;
                border-color: #42404A;
            }
        }

        &.active {
            background: url('../../assets/pro/gameInfoRightBar/comment_active.svg') no-repeat;
            background-size: cover;
        }
    }

    .zan-btn {
        background: url('../../assets/pro/gameInfoRightBar/zan.svg') no-repeat;
        background-size: cover;
        margin-top:30px;

        &:hover {
            background: url('../../assets/pro/gameInfoRightBar/zan_hover.svg') no-repeat;
            background-size: cover;

            .num {
                background: #42404A;
                border-color: #42404A;
            }
        }

        &.active {
            background: url('../../assets/pro/gameInfoRightBar/zan_active.svg') no-repeat;
            background-size: cover;
            // margin-top: 50px;
        }
    }

    .fav-btn {
        background: url('../../assets/pro/gameInfoRightBar/fav.svg') no-repeat;
        background-size: cover;
        margin-top:30px;

        &:hover {
            background: url('../../assets/pro/gameInfoRightBar/fav_hover.svg') no-repeat;
            background-size: cover;

            .num {
                background: #42404A;
                border-color: #42404A;
            }
        }

        &.active {
            background: url('../../assets/pro/gameInfoRightBar/fav_active.svg') no-repeat;
            background-size: cover;
            // margin-top: 50px;
        }
    }

    .take-top {
        background: url('../../assets/pro/gameInfoRightBar/take_top.svg') no-repeat;
        background-size: cover;
        cursor: pointer;
        margin-top:30px;

        &:hover {
            background: url('../../assets/pro/gameInfoRightBar/take_top_active.svg') no-repeat;
            background-size: cover;
        }
    }
}

.new-kj-reply-form {
    border: 1px solid #DEDEE6;
    display: flex;
    height: 46px;
    min-width: 322px;
    border-radius: 46px;
    background: rgb(255 255 255 / 20%);
    padding-right: 3px;
    box-sizing: border-box;

    // transition:.1s all linear;
    &:hover {
        background: #fff;

        input {
            color: #000 !important;
        }
    }

    input {
        outline: none;
        // background:#EBEDF5;
        background: transparent;
        border: none !important;
        padding-left: 15px;
        color: #fff !important;
        width: 100%;
        font-size: 16px;
        border-radius: 46px;

        &:focus {
            border: none !important;
            border-radius: 46px;
        }

        &::placeholder {
            color: #808080;
        }
    }

    .nkr-send-bar {
        display: flex;
        align-items: center;
        position: relative;

        .face-icon {
            width: 18px;
            height: 18px;
            // background: url('../20220311/icon_smile.png') no-repeat;
            background-size: cover;
            margin-right: 6px;
            cursor: pointer;
        }

        .nkr-send-btn {
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            min-width: 64px;
            text-align: center;
            background: #11CCB0;
            display: inline-block;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            user-select: none;
            transition: .2s all linear;
            opacity: .3;
        }

        .nkr-send-btn-active {
            opacity: 1;
        }

        .qqFace {
            width: 350px !important;
            height: 200px !important;
            bottom: 0px !important;
            padding: 25px;
            border: 1px solid #D8DBEB;
            top: 46px !important;
            left: inherit !important;
            right: 0px !important;

            table {
                tr {
                    td {
                        text-align: center;
                    }
                }
            }
        }
    }
}

.mb20 {
    margin-bottom: 20px;
}

.img-comment-area {
    margin-top: 14px;
    border-left: 2px solid #292929;
    padding-left: 19px;
    position: absolute;
    bottom:54px;
    z-index:104;
    border-radius:16px;
    background:#23232A;
    width:480px;
    left:44px;
    padding:23px 24px;
    .dm-win-head{
        font-size:16px;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content:center;
        margin-bottom:24px;
        position: relative;
        .close{
            background:url('../../assets/pro/img_dm_close.svg') no-repeat;
            width:18px;height:18px;
            background-size:cover;
            position: absolute;
            transition:.2s all linear;
            right:0px;
            &:hover{
                transform:rotate(180deg);
            }
        }
    }
    .img-dm-winwrap{
        max-height:560px;
        overflow-y:auto;
    }
    .more-row {
        width: max-content;

        .more-btn {
            color: #969696;
            font-size: 14px;
            display: flex;
            align-items: center;

            &:after {
                content: '';
                background: url('../../assets/pro/img_more_cmt.svg') no-repeat;
                background-position: right center;
                margin-left: 3px;
                width: 12px;
                height: 12px;
            }

            &.collapsed {
                &:after {
                    transform: rotate(180deg);
                }
            }
        }

        margin-bottom:18px;
    }

    .cmts {
        display: flex;
        flex-direction: column;
        grid-gap:20px;

        .item {
            display: flex;
            align-items: center;
            transition: .2s all linear;
            animation: opacity .2s ease-in;
            align-items: flex-start;
            >a {
                margin-right: 10px;
                width: 28px;
                height: 28px;
                border-radius: 14px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .basic-r {
                display: flex;
                flex-direction: column;
                width:100%;
                .tp {
                    color: #969696;
                    margin-bottom: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width:100%;
                    .ltop{
                        
                        width:100%;
                    }
                    .tim {
                        margin-left: 5px;
                    }

                    .cmt-del{
                        width:15px;height:15px;
                        background:url('../../assets/pro/img_cmt_del.svg') no-repeat;
                        background-size:cover;
                        margin-right:34px;
                    }
                }

                .con {
                    font-size: 16px;
                    max-width:360px;
                    img {
                        width: 25px;
                        height: 25px;
                        margin: 0px 4px;
                    }
                }
            }
        }
    }
}

.cmt-html {
    >div {
        // display: flex;
        // align-items: center;
        // flex-wrap: wrap;
        // grid-gap: 5px;
    }

    img {
        width: 20px;
        vertical-align: middle;
    }
}

.con-html {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 5px;
}

.qqFace {
    width: 350px !important;
    height: 200px !important;
    bottom: 0px !important;
    padding: 25px;
    border: 1px solid #D8DBEB;
    top: 46px !important;
    left: inherit !important;
    right: 0px !important;

    table {
        tr {
            td {
                text-align: center;
            }
        }
    }
}

.act-dtl-atenbtns {
    width: 100%;
}

.nine-new-work-top-atbtn-box {
    justify-content: center !important;

    .new-kj-reply-form-container {
        // position: absolute;
        // left:24px;
    }

    .cur-zans {
        // position: absolute;
        // right:0px;
    }
}

.common-icon-clear-inp {
    min-width: 16px;
    height: 16px;
    // background: url('../20220311/inp_icon_clear.png') no-repeat;
    background-size: cover;
    margin-right: 14px;
    cursor: pointer;
    transition: .2s all linear;

    &:hover {
        opacity: .7;
    }
}

.shadow-fbl-form {
    //box-shadow:#11ccb0 0px -1px 6px -1px, #11ccb0 0px 1px 6px -1px;
    border: 1px solid #11ccb0;
    background-color: #fff;

    input {
        background: #fff;
    }
}

.auto-width {
    &:after {
        width: 42px !important;
        border-radius: 20px;
    }

    .u-box {
        margin-right: 15px !important;
    }
}

.body-over-hidden {
    overflow: hidden;
}

.sys-cmt-rbox::-webkit-scrollbar {
    display: none;
}

.picture-v-mask {
    background: transparent;
    position: fixed;
    left: 0px;
    right: 0px;
    height: 100%;
    z-index: 11;
    width: 100%;
    top: 0px;
    // opacity: .5;
    background: #626262;
    // background-color: rgba(247, 249, 250, 0.9);
    // backdrop-filter: blur(20px);
}

.zdx-v-mask {
    background: transparent;
    position: fixed;
    left: 0px;
    right: 0px;
    height: 100%;
    z-index: 117;
    width: 100%;
    top: 0px;
    // opacity: .5;
    background: #626262;
    // background-color: rgba(247, 249, 250, 0.9);
    // backdrop-filter: blur(20px);
}

.zdx-vmask-theme-one {
    background-image: linear-gradient(to top right, #f0f0f0 25%, transparent 0, transparent 75%, #f0f0f0 0, #f0f0f0), linear-gradient(to top right, #f0f0f0 25%, transparent 0, transparent 75%, #f0f0f0 0, #f0f0f0);
    background-color: #fff;
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

.zdx-vmask-theme-two {
    background: #0f0f0f;
}

.zdx-vmask-theme-three {
    background: #fff;
}

.zdx-vmask-theme-four {
    background: #818181;
}

.zdx-v-container {
    position: fixed;
    z-index: 118;
    top: 0px;
    left: 0px;
    height: 100%;
    right: 0px;
    font-size: 14px;
    overflow-y: auto;

    .zdx-modal-close {
        transition: .1s all linear;
        position: absolute;
        width: 48px;
        height: 48px;
        right: 24px;
        top: 34px;
        background: url(../../assets/close.png) center no-repeat;
        z-index: 118;
        background-size: 13px 13px;
        border-radius: 48px;

        &:hover {
            cursor: pointer;
            opacity: .9;
        }

        background-color:#505153;
    }

    .v-img-wrap {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        user-select: none;
        z-index: 117;
        // cursor: zoom-out;
        overflow-y: auto;

        .v-img {
            position: absolute;
            top: 0px;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                transition: transform .15s linear;
                cursor: zoom-out;
            }
        }
    }

    .xzcontrol {
        position: fixed;
        opacity: .6;
        height: 40px;
        line-height: 40px;
        background-color: rgba(228, 233, 237, .7);
        color: #000;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 12px;
        bottom: 15px;
        user-select: none;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        transition: opacity .3s ease-in;

        &:hover {
            opacity: 1;
        }

        .VDPptet4 {
            border-left: 1px solid #000;
            margin: 12px 4px;
        }

        [data-tooltip] {
            position: relative;

            &:after,
            &:before {
                position: absolute;
                transition: opacity .2s ease;
                opacity: 0;
                pointer-events: none;
                left: 50%;
                top: -3px;
                transform: translate(-50%, -100%);
                font-size: 14px;
                box-sizing: border-box;
            }

            &:before {
                content: "";
                display: block;
                width: 14px;
                border: 6px solid transparent;
                border-top-color: rgba(0, 0, 0, .85);
                border-bottom: none;
            }

            &:after {
                content: attr(data-tooltip);
                top: -9px;
                background-color: rgba(0, 0, 0, .85);
                word-break: keep-all;
                border-radius: 12px;
                padding: 0 15px;
                height: 40px;
                line-height: 40px;
                color: #fff;
                white-space: nowrap;
            }

            &:hover {

                &:after,
                &:before {
                    opacity: 1;
                }
            }
        }

        li {
            display: flex;
            align-items: center;
            justify-content: center;

            .anticon {
                display: inline-block;
                color: inherit;
                font-style: normal;
                line-height: 0;
                text-align: center;
                text-transform: none;
                vertical-align: -0.125em;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                width: 40px;


                margin: 0;
                padding: 8px;
                border-radius: 12px;
                transition: background .1s ease;

                i {
                    width: 24px;
                    line-height: 24px;
                    color: #000;
                    font-weight: bold;
                    font-size: 20px;
                }

                .icon-beijing {
                    font-weight: normal;
                    font-size: 18px;
                }

                &:hover {
                    background: #fff;
                }
            }

            &:last-child {
                margin: 0;
                padding: 0 8px;
                border-radius: 12px;
                min-width: 55px;
                text-align: center;
            }
        }

        .ZsmxC21M {
            &:hover {
                background: #fff;
            }
        }
    }
}



@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

// .pv-fixed-gotop{
//     .g-top{
//         display:inherit !important;
//     }
// }
.footer-fun-bar {
    a {
        transition: .1s all linear;
    }

    // a:hover{
    //     opacity:.8;
    // }
    .publish {
        &:hover {
            background: #0fab94;
        }
    }
}

.pro-quill-editor {
    .ql-toolbar {}

    .ql-editor {
        min-height:400px;
        // max-height: 800px;
        // height: max-content;

        .n,
        em {
            font-style: italic;
        }

        &::-webkit-scrollbar {
            width: 6px;
            height: 8px;
            background-color: transparent;
        }

        /*滚动条的轨道*/
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /*滚动条的滑块按钮*/
        &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #626262;
        }

        /*滚动条的上下两端的按钮*/
        &::-webkit-scrollbar-button {
            height: 0;
        }

        /* 两个滚动条的交汇处 */
        &::-webkit-scrollbar-corner {
            background-color: transparent;
        }
    }
}

@keyframes moveUpDown{
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-60px)
    }

    to {
        transform: translateY(0)
    }
}
.first-scroll{
    background: rgba(0,0,0,0.7);
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    z-index:104;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    .scroll-tip-text{
        height:25px;
        background:url('../../assets/pro/first_scroll_down.svg') no-repeat;
        background-position:0px 0px;
        background-size:cover;
        width:150px;
        margin-bottom:50px;
    }
    .scroll-tip-icon{
        height:170px;
        background:url('../../assets/pro/first_scroll_down.svg') no-repeat;
        background-position:center -25px;
        background-size:cover;
        width:150px;
        animation: moveUpDown 2s ease-in-out infinite;
    }
    // &:after{
    //     background:url('../../assets/pro/first_scroll_down.svg') no-repeat;
    //     background-position:center center;
    //     content:'';
    //     position: absolute;
    //     top:0px;
    //     right:0px;
    //     bottom:0px;
    //     left:0px;
    // }
}
.mini-tip-pop{
    background:#23232A !important;
    color:#fff;
    .popper__arrow{
        display: none;
    }
}
.ar-pro-quill-editor {
    h1,h2,h3,h4,h5,h6{
        // color:inherit;
    }
    border-radius: 16px;
    .ql-snow .ql-stroke{
        stroke:#fff;
    }
    .ql-snow .ql-fill{
        fill:#fff;
    }
    .ql-snow .ql-picker{
        color:#fff;
    }
    .ql-snow .ql-picker-options{
        background:#23232A;
    }
    .ql-color-picker{
        .ql-picker-options{
            background:#23232A;
            left:-124px;
        }
    }
    .ql-toolbar.ql-snow .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{
        border-color:#4b4b4b !important;
    }

    .ql-snow.ql-toolbar button:hover .ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
        fill: #11CCB1 !important;
    }

    .ql-snow.ql-toolbar button:hover,
    .ql-snow .ql-toolbar button:hover,
    .ql-snow.ql-toolbar button:focus,
    .ql-snow .ql-toolbar button:focus,
    .ql-snow.ql-toolbar button.ql-active,
    .ql-snow .ql-toolbar button.ql-active,
    .ql-snow.ql-toolbar .ql-picker-label:hover,
    .ql-snow .ql-toolbar .ql-picker-label:hover,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active,
    .ql-snow.ql-toolbar .ql-picker-item:hover,
    .ql-snow .ql-toolbar .ql-picker-item:hover,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow.ql-toolbar button:hover .ql-stroke,
    .ql-snow .ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button:focus .ql-stroke,
    .ql-snow .ql-toolbar button:focus .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
        color: #11CCB1 !important;
        stroke: #11CCB1 !important;
    }
}

.confirm-mask {
    // background: rgba(0, 0, 0, 0.46);
    // position: fixed;
    // left: 0px;
    // right: 0px;
    // top: 0px;
    // height: 100%;
    // z-index: 111;
    color: #fff;

    .confirm-win {
        // position: fixed;
        // z-index: 112;
        // width: 408px;
        height: 209px;
        // left: calc((100% - 408px) / 2);
        // top: 30%;
        background: #23232A;
        // border-radius: 30px;
        // box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
        padding: 30px 44px 35px 44px;

        .title {
            line-height: 22px;
            font-weight: 500;
            font-size: 16px;
            text-align: center;
        }

        .msg {
            margin: 31px auto 31px auto;
            font-size: 14px;
            text-align: center;
        }

        .btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 500;
            line-height: 40px;
            color: #fff;

            .confirm {
                background: #37363E;
                border-radius: 8px;
                width: 150px;
                text-align: center;
            }

            .cancel {
                background: #11CCB1;
                border-radius: 8px;
                width: 150px;
                text-align: center;
            }
        }
    }
}

.pro-import-area {
    position: relative;

    .pro-import-video-box {
        width: 550px;
        background: #23232A;
        box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
        border-radius: 30px;
        padding: 26px 31px 27px 30px;
        position: absolute;
        z-index: 112;
        top: 48px;
        right: 0px;

        textarea {
            background: #171719;
            width: 100%;
            height: 80px;
            resize: none;
            border: none;
            padding: 10px 12px;
            color: #fff;
            border-radius: 8px;
            line-height: 20px;
            display: block;
        }

        .btns {
            line-height: 40px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            margin-top: 20px;
            align-items: center;
            justify-content: flex-end;
            opacity: 1;

            a {
                transition: .1s all linear;
                user-select: none;
            }

            .add {
                background: #11CCB1;
                color: #fff;
                width: 100px;
                border-radius: 8px;
                text-align: center;
                margin-left: 15px;
            }

            .cancel {
                background: #37363E;
                color: #fff;
                width: 100px;
                border-radius: 8px;
                text-align: center;
            }
        }
    }
}


.hot-gx-data {
    padding: 19px 20px;
    // background: #171717;
    border-radius: 16px;
    
    min-width:340px;
    .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 34px;
        align-items: center;
        height: 51px;
        &.no-data{
            background:#1D1D1F;
        }

        &:last-child {
            margin-bottom: 0px;
        }

        .u-box {
            display: flex;

            .img-box {
                margin-right: 16px;

                width: 48px;
                height: 48px;
                overflow: hidden;
                border-radius: 48px;
                &:hover{
                    img{
                        transform: scale(1.08);
                    }
                }
                img {
                    width:100%;
                    height:100%;
                }
            }

            .basic-box {
                .tit {
                    display: flex;
                    align-items: center;
                    color: #fff;
                    font-size: 16px;
                    margin-bottom: 8px;
                    &:hover{
                        color:#11CCB1;
                        text-decoration: underline;
                    }
                    img {
                        margin-left: 4px;
                        width:22px;
                    }
                }

                .num-b {
                    font-size:14px;
                    span {
                        color: #848393;

                        &:first-child {
                            margin-right: 21px;
                        }

                        b {
                            color: #fff;
                            font-style: normal;
                            margin-left: 4px;
                            font-weight: 500;
                        }
                    }
                }
            }
        }

        .at-btn {
            // margin-right: 20px;
            background-color: rgba(228, 36, 82, .2);
            // opacity:.2;
            color: #fff;
            line-height: 34px;
            width: 67px;
            font-size: 14px;
            text-align: center;
            border-radius: 8px;
            transition: .2s all linear;

            &:hover {
                background-color: rgba(228, 36, 82, 1);
            }

            &.active {
                background: #29272F;
                color: #fff;

                &:hover {
                    opacity: .8;
                }
            }
        }
    }

    &.sm-pg-gxd {
        .item {
            .at-btn {
                margin-right: 0px;
            }
        }
    }
}

.global-vclose {
    width: 89px;
    height: 89px;
    background: url('../../assets/pro/videobar/global_vclose.svg') no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 1000;
    left: 40px;
    top: 50px;
    transition: .1s all linear;

    &:hover {
        background: url('../../assets/pro/videobar/global_vclose_active.svg') no-repeat;
    }
}

.third-play{
    // border:2px solid #515151;
    overflow: hidden;
    border-radius:16px;
    padding:5px;
    position: relative;
    &:after{
        content: '';
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background: #000;
        opacity: 0;
    }
    iframe{
        *{
            overflow: hidden;
        }
    }
}
.gm-info-pop {
    min-width: inherit;
    border-radius: 0px;
    padding: 0px;
    line-height: inherit;
    .sm-tip {
        border-radius: 4px;
        background: #353540;
        line-height: 18px;
        padding: 4px 7px;
        font-style: normal;
        font-size: 12px;
        color: #fff;
    }

    .popper__arrow {
        display: none;
    }
}
// .other-main{
    .games-data{
        display: flex;
        grid-gap:20px;
        flex-wrap: wrap;
        // margin-top:20px;
        .dx-vd-item {
            width: calc((100% - 40px) / 3);
            min-height:210px;
            // height: 290px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            // background: #171717;
            border-radius: 16px;
            overflow: hidden;
            color: #fff;
            position: relative;
            border: 2px solid transparent;
            // transition: .1s all linear;
            padding-bottom:14px;
            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border-color:@hover-brder;
                cursor: pointer;

                a {
                    >img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;

                    transition: 0.1s all linear;
                }
            }

            .fav-d-item {

                animation: opacity .2s linear;

                &:hover {
                    border: 2px solid #11CCB1;

                    .img-flex-box {
                        .main-img>img {
                            transform: scale(1.08);
                        }

                        .main-img {
                            .ops {
                                display: flex;
                            }
                        }
                    }
                }

                &:nth-child(5n) {
                    margin-right: 0px;
                }

                &.create-btn {
                    border: 2px dashed #424242;
                    border-radius: 16px;
                    transition: 0.1s all linear;

                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        transition: .1s all linear;

                        .plus-icon {
                            width: 40px;
                            height: 40px;
                            border-radius: 40px;
                            background-color: #29272f;
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            margin: 91px auto 18px auto;
                            background-image: url('../../assets/pro/list_create_plusico.svg');
                            background-repeat: no-repeat;
                            background-size: 40px 40px;
                        }

                        .text {
                            font-size: 14px;
                            color: #fff;
                            font-weight: 500;
                        }
                    }

                    &:hover {
                        border-color: #fff;
                    }
                }

                .img-flex-box {
                    display: flex;
                    align-items: center;
                    position: relative;
                    // height: 269px;
                    
                    .left-icos{
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;
                    }
                    .lt-img {
                        width: 204px;
                        height: 210px;
                        margin-right: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .rt-img {
                        .next-img {
                            width: 102px;
                            height: 102px;
                            margin-bottom: 6px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .last-img {
                            width: 102px;
                            height: 102px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }

                    .main-img {
                        // height: 269px;
                        width: 100%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .ops {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            display: none;
                            transition: .2s all linear;

                            a {
                                border-radius: 12px;
                                background: #FFFFFF;
                                width: 40px;
                                height: 40px;
                                transition: .2s all linear;

                                &:hover {
                                    // opacity:.9;
                                    background-color: #e1e1e1;
                                }
                            }

                            .i-del {
                                background-image: url('../../assets/pro/i_del.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                                margin-right: 10px;
                            }

                            .i-edit {
                                background-image: url('../../assets/pro/i_edit.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }
                    }

                    .author {
                        position: absolute;
                        bottom: 10px;
                        left: 9px;
                        background: rgba(255, 255, 255, 0.9);
                        border-radius: 12px;
                        padding: 10px 13px;
                        transition: 0.1s all linear;
                        width: 164px;
                        cursor: pointer;

                        &:hover {
                            background: rgba(255, 255, 255, 1);
                        }

                        .ar-tit {
                            font-size: 14px;
                            font-weight: 500;
                            color: #383737;
                            line-height: 20px;
                            margin-bottom: 5px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
                            background-position: left center;
                            padding-left: 22px;
                        }

                        .u-box {
                            display: flex;
                            padding-left: 20px;

                            .name {
                                font-size: 14px;
                                color: #969696;
                                font-weight: 500;
                            }

                            .avatar {
                                width: 20px;
                                height: 20px;
                                border-radius: 20px;
                                margin-right: 7px;
                            }
                        }
                    }

                    .at-btn {
                        color: #fff;
                        font-size: 14px;
                        background-color: #11CCB1;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../../assets/pro/un_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .ated-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../../assets/pro/cancel_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .edit-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        background-image: url('../../assets/pro/edit_ico.svg');
                        background-repeat: no-repeat;
                        background-position: center center;
                    }

                    .hid-el {
                        // display: none;
                        transition: .1s all linear;
                        opacity: 0;
                    }

                    &:hover {
                        .hid-el {
                            // display: inline-block;
                            opacity: 1;
                        }
                    }
                }

                .bot-desc {
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 9px;
                    align-items: center;
                    padding-right: 16px;
                    line-height: 22px;

                    .file-name {
                        color: #fff;
                        font-weight: 500;
                        padding-left: 15px;
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .zan-num {
                        color: #969696;
                        background: url('../../assets/pro/dianzanicon.svg') no-repeat;
                        padding-left: 24px;
                        font-size: 12px;
                        background-position: left center;
                    }

                    .type-text {
                        border: 1px solid #4B4B52;
                        border-radius: 2px;
                        color: #848393;
                        font-size: 12px;
                        padding: 0px 5px;
                        line-height: 18px;
                        white-space: nowrap;
                        margin-left: 30px;
                    }
                }

                .bot-author {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 15px;
                    margin-top: 11px;
                    // padding-bottom: 14px;
                    padding-right: 16px;

                    // line-height:26px;
                    // height:26px;
                    // border:1px solid red;
                    .u {
                        display: flex;
                        align-items: center;
                        line-height: 20px;

                        .img-box {
                            min-width: 20px;
                            max-width: 20px;
                            // height: 20px;
                            // overflow: hidden;
                            margin-right: 6px;

                            img {
                                border-radius: 20px;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        .name{
                            display: flex;
                            align-items: center;
                        }

                        &:hover {
                            color: #11CCB1;
                        }
                    }
                    .rt{
                        display: flex;
                    }
                    .like-num {
                        background: url('../../assets/pro/icon_like2.svg') no-repeat;
                        background-position: left center;
                        background-size: 20px 20px;
                        padding-left: 22px;
                        line-height: 20px;
                    }
                    
                    .vnum {
                        font-size: 12px;
                        background: url('../../assets/pro/l_vnum.svg') no-repeat;
                        padding-left: 20px;
                        background-position: left center;
                        // color: #fff;
                        line-height: 20px;
                        margin-left:20px;
                    }
                }
            }
        }
    }
// }
.works-list-page,
.article-list-page {
    .games-data {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-gap: 20px;

        .gd-item {
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            margin-right: 20px;
            margin-bottom: 20px;
            // transition:.1s all linear;
            animation: opacity .2s linear;

            // border:2px solid #111;
            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border: 2px solid #11CCB1;
                cursor: pointer;

                a {
                    >img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;

                    transition: 0.1s all linear;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .right-icos {
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        // margin-right:10px;
                    }
                }
            }

            .basic-info {
                position: absolute;
                bottom: 10px;
                left: 10px;
                z-index: 1;
                color: #fff;

                .title {
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 3px;
                }

                .bot-desc {
                    font-size: 12px;
                    color: #fff;
                    display: flex;
                    .pnum {
                        background: url('../../assets/pro/icon_pic.svg') no-repeat;
                        background-position: left center;
                        padding-left: 16px;
                    }

                    .uname {
                        margin-left: 32px;
                        background: url('../../assets/pro/icon_user.svg') no-repeat;
                        background-position: left center;
                        padding-left: 16px;
                    }
                }
            }
        }

        &.small {
            .gd-item {
                width: 216px;
                height: 216px;
                min-width: 216px;

                &:nth-child(7n) {
                    margin-right: 0px !important;
                }
            }
        }

        &.big {
            .gd-item {
                width: 312px;
                height: 312px;
                min-width: 312px;

                &:nth-child(5n) {
                    margin-right: 0px !important;
                }
            }
        }

        .dx-vd-item {
            width: calc((100% - 80px) / 5);
            min-height:210px;
            // height: 290px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            // background: #171717;
            border-radius: 16px;
            overflow: hidden;
            color: #fff;
            position: relative;
            border: 2px solid transparent;
            // transition: .1s all linear;
            padding-bottom:14px;
            .hid-el {
                // display: none;
                opacity: 0;
            }

            &:hover {
                border-color:@hover-brder;
                cursor: pointer;

                a {
                    >img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;

                    transition: 0.1s all linear;
                }
            }

            .fav-d-item {

                animation: opacity .2s linear;

                &:hover {
                    border: 2px solid #11CCB1;

                    .img-flex-box {
                        .main-img>img {
                            transform: scale(1.08);
                        }

                        .main-img {
                            .ops {
                                display: flex;
                            }
                        }
                    }
                }

                &:nth-child(5n) {
                    margin-right: 0px;
                }

                &.create-btn {
                    border: 2px dashed #424242;
                    border-radius: 16px;
                    transition: 0.1s all linear;

                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        transition: .1s all linear;

                        .plus-icon {
                            width: 40px;
                            height: 40px;
                            border-radius: 40px;
                            background-color: #29272f;
                            display: block;
                            text-align: center;
                            line-height: 40px;
                            margin: 91px auto 18px auto;
                            background-image: url('../../assets/pro/list_create_plusico.svg');
                            background-repeat: no-repeat;
                            background-size: 40px 40px;
                        }

                        .text {
                            font-size: 14px;
                            color: #fff;
                            font-weight: 500;
                        }
                    }

                    &:hover {
                        border-color: #fff;
                    }
                }

                .img-flex-box {
                    display: flex;
                    align-items: center;
                    position: relative;
                    // height: 269px;
                    
                    .left-icos{
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;
                    }
                    .lt-img {
                        width: 204px;
                        height: 210px;
                        margin-right: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .rt-img {
                        .next-img {
                            width: 102px;
                            height: 102px;
                            margin-bottom: 6px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .last-img {
                            width: 102px;
                            height: 102px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }

                    .main-img {
                        // height: 269px;
                        width: 100%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .ops {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            display: none;
                            transition: .2s all linear;

                            a {
                                border-radius: 12px;
                                background: #FFFFFF;
                                width: 40px;
                                height: 40px;
                                transition: .2s all linear;

                                &:hover {
                                    // opacity:.9;
                                    background-color: #e1e1e1;
                                }
                            }

                            .i-del {
                                background-image: url('../../assets/pro/i_del.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                                margin-right: 10px;
                            }

                            .i-edit {
                                background-image: url('../../assets/pro/i_edit.png');
                                background-size: 22px 22px;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }
                    }

                    .author {
                        position: absolute;
                        bottom: 10px;
                        left: 9px;
                        background: rgba(255, 255, 255, 0.9);
                        border-radius: 12px;
                        padding: 10px 13px;
                        transition: 0.1s all linear;
                        width: 164px;
                        cursor: pointer;

                        &:hover {
                            background: rgba(255, 255, 255, 1);
                        }

                        .ar-tit {
                            font-size: 14px;
                            font-weight: 500;
                            color: #383737;
                            line-height: 20px;
                            margin-bottom: 5px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
                            background-position: left center;
                            padding-left: 22px;
                        }

                        .u-box {
                            display: flex;
                            padding-left: 20px;

                            .name {
                                font-size: 14px;
                                color: #969696;
                                font-weight: 500;
                            }

                            .avatar {
                                width: 20px;
                                height: 20px;
                                border-radius: 20px;
                                margin-right: 7px;
                            }
                        }
                    }

                    .at-btn {
                        color: #fff;
                        font-size: 14px;
                        background-color: #11CCB1;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../../assets/pro/un_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .ated-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        background-image: url('../../assets/pro/cancel_follow_ico.svg');
                        background-repeat: no-repeat;
                        background-position: 11px center;
                        // width:82px;
                        padding-left: 35px;
                        padding-right: 19px;
                        text-align: center;
                        position: absolute;
                        left: 10px;
                        top: 10px;
                    }

                    .edit-btn {
                        color: #383737;
                        font-size: 14px;
                        background-color: #fff;
                        border-radius: 12px;
                        line-height: 44px;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        background-image: url('../../assets/pro/edit_ico.svg');
                        background-repeat: no-repeat;
                        background-position: center center;
                    }

                    .hid-el {
                        // display: none;
                        transition: .1s all linear;
                        opacity: 0;
                    }

                    &:hover {
                        .hid-el {
                            // display: inline-block;
                            opacity: 1;
                        }
                    }
                }

                .bot-desc {
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 9px;
                    align-items: center;
                    padding-right: 16px;
                    line-height: 22px;

                    .file-name {
                        color: #fff;
                        font-weight: 500;
                        padding-left: 15px;
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .zan-num {
                        color: #969696;
                        background: url('../../assets/pro/dianzanicon.svg') no-repeat;
                        padding-left: 24px;
                        font-size: 12px;
                        background-position: left center;
                    }

                    .type-text {
                        border: 1px solid #4B4B52;
                        border-radius: 2px;
                        color: #848393;
                        font-size: 12px;
                        padding: 0px 5px;
                        line-height: 18px;
                        white-space: nowrap;
                        margin-left: 30px;
                    }
                }

                .bot-author {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 15px;
                    margin-top: 11px;
                    // padding-bottom: 14px;
                    padding-right: 16px;

                    // line-height:26px;
                    // height:26px;
                    // border:1px solid red;
                    .u {
                        display: flex;
                        align-items: center;
                        line-height: 20px;

                        .img-box {
                            min-width: 20px;
                            max-width: 20px;
                            // height: 20px;
                            // overflow: hidden;
                            margin-right: 6px;

                            img {
                                border-radius: 20px;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        .name{
                            display: flex;
                            align-items: center;
                        }

                        &:hover {
                            color: #11CCB1;
                        }
                    }
                    .rt{
                        display: flex;
                    }
                    .like-num {
                        background: url('../../assets/pro/icon_like2.svg') no-repeat;
                        background-position: left center;
                        background-size: 20px 20px;
                        padding-left: 22px;
                        line-height: 20px;
                    }
                    
                    .vnum {
                        font-size: 12px;
                        background: url('../../assets/pro/l_vnum.svg') no-repeat;
                        padding-left: 20px;
                        background-position: left center;
                        // color: #fff;
                        line-height: 20px;
                        margin-left:20px;
                    }
                }
            }
        }
    }
}

.article-single-page{
    display: flex;

    .wp-content-lft {
        width: 100%;
        .wct-wrap{
            width:800px;
            margin:0 auto;
            transition:.1s all linear;
        }

        .works-tab {
            font-size: 24px;
            color: #969696;
            line-height: 33px;
            // height: 37px;
            position: relative;
            padding-bottom:16px;
            position: sticky;
            top:84px;
            z-index:1;
            a {
                &:first-child {
                    margin-right:36px;
                }

                &.active {
                    color: #fff;
                    font-size: 26px;
                    font-weight: 500;
                    position: relative;
                    &:after{
                        content: '';
                        height:2px;
                        background:#11CCB1;
                        border-radius:2px;
                        width:24px;
                        position: absolute;
                        left:calc((100% - 24px) / 2);
                        bottom:-4px;
                    }
                }
            }

            .change-random-btn {
                font-size: 12px;
                color: #848393;
                position: absolute;
                right: 0px;
            }
        }

        .work-datas{
            .wk-d-item{
                animation:opacity .5s ease-in;
                // background:#1D1D1F;
                border-radius: 16px;
                margin-bottom:20px;
                min-height:544px;
                &:last-child{
                    margin-bottom:0px;
                }
                .img-box{
                    height:480px;
                    border-radius:16px;
                    overflow: hidden;
                    position: relative;
                    >img{
                        width:100%;
                        height:100%;
                        object-fit: cover;
                    }
                    &:hover{
                        >img{
                            transform: scale(1.08);
                        }
                    }
                    .left-icos {
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;
                    }        
                }
                .u-bot{
                    height:70px;
                    display: flex;
                    align-items: center;
                    padding-left:15px;
                    padding-right:17px;
                    .at-box{
                        width:44px;height:44px;
                        min-width:44px;
                        border-radius:44px;
                        overflow: hidden;
                        margin-right:14px;
                        img{
                            width:100%;height:100%;
                            object-fit: cover;
                        }
                    }
                    .at-basic{
                        width:100%;
                        .tit{
                            font-size:16px;
                            color:#fff;
                            font-weight:500;
                        }
                        .other{
                            font-size:14px;
                            color:#969696;
                            
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .name{
                                font-weight:500;
                            }
                            .nums{
                                span{
                                    padding-left:26px;
                                    margin-right:19px;
                                    &:last-child{
                                        margin-right:0px;
                                    }
                                }
                                .v-num{
                                    background:url('../../assets/pro/yuedu_icon.svg') no-repeat;
                                }
                                .fv-num{
                                    background:url('../../assets/pro/shoucangicon.svg') no-repeat;
                                }
                                .z-num{
                                    background:url('../../assets/pro/icon_like2.svg') no-repeat;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .view-more {
        text-align: center;
        padding-top: 16px;
        border-top: 1px solid #323232;

        a {
            color: #848393;
            font-size: 14px;
            display: inline-block;
            width: 100%;
            height: 100%;
            background: url('../../assets/pro/gd_arrow.svg') no-repeat;
            background-position: 62% center;
            background-size:10px 10px;
            display: inherit !important;
        }
    }

    .wp-content-rt {
        min-width: 346px;
        max-width:346px;
        max-height:calc(100vh - 110px);
        overflow-y:auto;
        position: sticky;
        padding-right:12px;
        overflow-x:hidden;
        top:84px;
        .panel-tit{
            font-size:26px;
            color:#fff;
            font-weight:500;
            line-height:37px;
            margin-bottom:10px;
        }

        .rank-datas {
            padding: 15px;
            // background: #171717;
            margin-bottom: 40px;
            border-radius: 16px;
            min-width:340px;
            // display: flex;
            // flex-direction: column;
            // grid-gap:40px;
            li {
                margin-bottom: 40px;
                // overflow: hidden;
                min-height:61px;
                &.no-data{
                    background:#1D1D1F;
                }
                a{
                    display: flex;
                }
                &:last-child{
                    margin-bottom:19px;
                }
                .img-box {
                    min-width: 88px;
                    max-width: 88px;
                    height: 60px;
                    border-radius: 8px;
                    margin-right: 15px;
                    overflow: hidden;
                    background:#1D1D1F;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .rk-d-rft {
                    width:calc(100% - 88px - 15px);
                    .tit {
                        line-height: 22px;
                        height:22px;
                        margin-bottom: 17px;
                        // font-weight: 600;
                        font-size: 16px;
                        color: #fff;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .bot-d {
                        display: flex;
                        justify-content: space-between;

                        .tags {
                            display: flex;
                            align-items: center;
                            .tag {
                                background: #242327;
                                border-radius: 11px;
                                margin-right: 12px;
                                font-size: 12px;
                                line-height:22px;
                                height:22px;
                                padding: 0px 10px;
                                color: #848393;
                                white-space: nowrap;
                                max-width:56px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                &:last-child {
                                    margin-right: 0px;
                                }
                            }
                        }

                        .view-num {
                            font-size: 14px;
                            color: #969696;
                            font-weight: 500;
                            background: url('../../assets/pro/view_num_icon.svg') no-repeat;
                            background-position: left center;
                            background-size: 14px 14px;
                            padding-left: 17px;
                        }
                    }
                }

                &:last-child {
                    margin-bottom: 0px;
                }
            }
        }

        
        &:hover{
            &::-webkit-scrollbar {
                display: block;
            }
        }
        &::-webkit-scrollbar {
            display: none;
        }
    }
}
.global-img-fun-pos.global-img-fun-pos{
    .el-popover__reference-wrapper{
        display: flex;
        align-items:center;
    }
}
.right-icos{
    top: 0px !important;
    right: 15px !important;
    img{
        width:28px !important;
    }
}
.article-con img{
    cursor: zoom-in;
}
.global-img-fun-pos {
    position: absolute;
    top: 10px;
    right: 10px;
    // z-index:1;
    // left:10px;
    // padding-right:10px;
    // padding-left:10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    // width: 100%;
    .fav-btn {
        background-color: #11CCB1;
        color: #171717;
        width: 32px;
        height: 32px;
        // width:82px;
        // position: absolute;
        // top: 10px;
        // right: 10px;
        font-size: 14px;
        border-radius: 8px;
        cursor: pointer;
        background-image: url('../../assets/pro/un_favicon.svg');
        background-repeat: no-repeat;
        background-position: 51%;

        // padding-left: 35px;
        // padding-right: 12px;
        &:not(.active):hover {
            background-color: #FF7285;
        }

        &.active {
            background-color: #DDDDDD;
            background-image: url('../../assets/pro/global_faved_icon.svg');
            background-repeat: no-repeat;
            background-position: center;
        }
    }

    .global-parise-btn {
        height: 32px;
        line-height: 32px;
        padding: 0px 16px 0px 11px;
        border-radius: 8px;
        font-size: 12px;
        margin-left: 10px;
        color: #171717;
        display: inline-block;
        background: rgba(255, 255, 255, 0.9);
        background-image: url('../../assets/pro/global_img_parise.svg');
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) center;
        min-width: 59px;
        position: relative;
        &:not(.active):hover {
            background-color: #d5d5d5;
        }
        // position: absolute;
        // right:10px;
        // top:10px;
        &.active {
            background-image: url('../../assets/pro/global_img_parise_active.svg');
            background-repeat: no-repeat;
            background-position: calc(100% - 10px) center;
        }
    }

    .select-btn {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        top: 5px;
        background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
        background-size: cover;

        &.active {
            background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
            background-size: cover;
        }
    }

    .img-edit{
        border-radius: 12px;
        background: #FFFFFF;
        width: 32px;
        height: 32px;
        transition: 0.2s all linear;

        background-image: url('../../assets/pro/i_edit.png');
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center;
        &:hover{
            background-color:#e1e1e1;
        }
    }
}

.pro-work-elcascader {
    width: 185px;
    line-height: 40px;

    &:hover {
        .el-input__inner {
            border: 1px solid #11CCB1 !important;
        }
    }

    .el-input .el-input__inner {
        line-height: 40px;
        height: 40px;
        background: #23232A;
        border-radius:8px;
        color: #fff;
        border-color: #23232A;

        &::-webkit-input-placeholder {
            font-weight: 500;
            color: #fff !important;
        }

        &:hover {
            border-color: #23232A;
        }
    }

    &.el-cascader:not(.is-disabled):hover .el-input__inner {
        border-color: #23232A;
    }

    &.el-cascader .el-input .el-input__inner:focus,
    &.el-cascader .el-input.is-focus .el-input__inner {
        // border-color:#29272f !important;
        border: 1px solid #11CCB1 !important;
    }

    .el-input .el-input__icon {

        &:after,
        &:before {
            display: none;
        }
    }

    .el-input .el-input__icon {
        background: url('../../assets/pro/page_ddl_down_arrow.svg') no-repeat;
        background-position: center;
        width: 20px;
        height: 20px;
        margin-top: 10px;
        opacity: .8;

        &:hover {
            opacity: 1;
        }

        &.is-reverse {
            transform: none;
        }

        &.el-icon-circle-close {
            background: url('../../assets/pro/cancel_search.svg') no-repeat;
        }
    }
}

.pro-wlrk-elcascader-proper {
    background: #29272f;
    border-radius: 16px;
    padding: 8px 9px;
    font-size: 16px;
    min-width: 150px;
    max-height: 300px;
    padding-bottom: 10px;
    border-color: #29272f;

    .popper__arrow {
        display: none;
        border-top-color: #29272f !important;
        border-bottom-color: #29272f !important;

        &:after {
            border-top-color: #29272f !important;
            border-bottom-color: #29272f !important;
        }
    }

    .el-cascader-node__label {
        color: #fff;
    }

    .el-cascader-node {
        height: 43px;
        line-height: 43px;
        border-radius: 8px;

        .el-icon-check {
            display: none;
        }

        &.is-active,
        &.in-active-path {
            background: #201d28;
            font-weight: normal;
            .el-cascader-node__label{
                color:#11CCB1 !important;
                background-image:url('../../assets/pro/ddl_item_active.svg');
                background-repeat:no-repeat;
                background-position:98% center;
            }
        }
    }

    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
        background: #201d28 !important;
    }

    .el-cascader-menu {
        border-right: none;
    }
}

.cover-win-box {
    // position: fixed;
    // width: 840px;
    // height:571px;
    // border-radius: 30px;
    // left: calc((100% - 840px) / 2);
    // top: 20%;
    // z-index: 104;
    background: #23232A;
    padding: 28px 30px;
    // box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
    color: #fff;

    .u-header {
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        position: relative;

        .close-win-box {
            width: 20px;
            height: 20px;
            background: url('../../assets/pro/close_modal_page.svg') no-repeat;
            background-size: cover;
            margin-left: 20px;
            position: absolute;
            right: 0px;
            top: 4px;
        }
    }

    .win-modal-con {
        display: flex;
        margin-top: 32px;

        .left {
            width: 490px;
            height: 400px;
            margin-right: 30px;
            background: #000000;
            border-radius: 16px;
            overflow: hidden;
        }

        .result {
            .img-box {
                width: 260px;
                height: 182px;
                // min-width: 260px;
                border-radius: 16px;
                overflow: hidden;
                display: block;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .preview-tit {
                text-align: center;
                display: inline-block;
                width: 100%;
                margin-top: 21px;
                font-size: 14px;
            }
        }
    }

    .fbar {
        font-size: 16px;
        font-weight: 500;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        user-select: none;
        margin-top: 20px;

        .again-upload {
            background: #37363E;
            line-height: 40px;
            border-radius: 8px;
            width: 130px;
            text-align: center;
            color: #fff;

            &:active,
            &:focus {
                color: #fff;

                .el-upload--text {
                    color: #fff;

                    &:active,
                    &:focus {
                        color: #fff;
                    }
                }
            }
        }

        .cut-btn {
            width: 100px;
            background: #11CCB1;
            text-align: center;
            margin-left: 15px;
            border-radius: 8px;
            line-height: 40px;
            transition: .1s all linear;

            &:hover {
                background-color: #0fab94;
            }
        }
    }
}

.img-detail-fbar{
    .pro-page-bar{
        right:20px;
    }
}
.img-detail{
    &.single{
        .img-component{
            background:#111;
            padding-bottom:200px;
        }
    }
}

.set-tag-modal-con {
    .inp-control-box {
        margin-top: 20px;
        display: flex;
        align-items: center;
        background: #171719;
        border-radius: 8px;
        input {
            background: #171719;
            line-height: 40px;
            border-radius: 8px;
            border: none;
            width: 100%;
            padding-left: 12px;
            font-size: 14px;
            color: #fff;
        }
        .clear-by-search {
            min-width: 14px;
            height: 14px;
            background: url('../../assets/pro/cancel_search.svg') no-repeat;
            background-size: cover;
            margin-right:10px;
            cursor: pointer;
        }
    }

    .tj-tags {
        margin-top: 20px;
        display: flex;

        .label {
            font-size: 14px;
            white-space: nowrap;
            margin-right: 20px;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            user-select: none;

            span {
                line-height: 30px;
                background: #37363E;
                color: #fff;
                border-radius: 15px;
                padding: 0px 15px;
                margin-right: 15px;
                margin-bottom: 15px;
                cursor: pointer;
                transition: .1s all linear;

                &.active {
                    background: #11CCB1;
                    color: #fff;
                }

                &.more-tag {
                    width: 30px;
                    height: 30px;
                    background: url('../../assets/pro/more_tag.svg') no-repeat;
                    background-size: 20px 20px;
                    background-position: center;
                    cursor: pointer;

                    &.up {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
}

.pro-radio-control {
    .el-radio__input .el-radio__inner {
        width: 18px;
        height: 18px;
        border-color: #424248;

        &:after {
            width: 6px;
            height: 6px;
            background: #23232A;
        }
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: #11CCB1;
        border-color: #11CCB1;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #fff;
    }
}


.html-content,
.article-con {
    font-size: 16px !important;
    // padding: 20px;
    // padding-top: 100px;

    * {
        color: #fff !important;
        background: #1D1C1B !important;
    }
    video{
        max-width:576px;
        max-height:324px;
        height:324px;
        width:576px;
        margin:0px auto 20px auto;
        display: block;
    }
    a {
        color: #fff;
    }
}

.pro-pbform-ckbox {
    display: flex;
    align-items: center;

    .el-checkbox__input {
        height: 20px;
    }

    .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: #29272F;
        border-color: #29272F;
        border: none;

        &:after {
            top: 4px;
            left: 8px;
        }
    }

    .el-checkbox__label {
        padding-left: 11px;
        line-height: 20px;
        font-weight: normal;
        color: #fff;
    }

    &.is-checked {
        .el-checkbox__inner {
            background: #11CCB1;
            border-color: #11CCB1;
        }

        .el-checkbox__label {
            color: #fff;
        }
    }
}



.ql-editor.ql-blank::before {
    font-style: normal !important;
    color: #6A6A80 !important;
    font-size: 14px;
}

input,
textarea {
    &::-webkit-input-placeholder {
        color: #6A6A80;
    }
}


.select-d-fix {
    position: fixed;
    bottom: 40px;
    left: 0px;
    right: 0px;
    z-index: -1;
    transition: .2s all linear;
    text-align: center;
    opacity: 0;

    .box {
        background: #23232A;
        height: 65px;
        border-radius: 16px;
        padding: 0px 14px;
        display: inline-block;
        margin: 0 auto;
        color: #fff;
        display: flex;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
        align-items: center;
        width: max-content;
        font-size: 14px;
        line-height: 38px;
        font-size: 14px;
        user-select: none;

        .num {
            background: #37363E;
            border-radius: 10px;
            padding: 0px 13px;
            padding-right: 0px;
            display: flex;
            align-items: center;

            i {
                color: #11CCB1;
                margin: 0px 4px;
                font-style: normal;
            }

            .cancel-select {
                width: 10px;
                height: 10px;
                background: url('../../assets/pro/close_collect.svg') no-repeat;
                background-size: 10px 10px;
                background-position: center;
                cursor: pointer;
                line-height: 38px;
                height: 38px;
                width: 38px;
            }
        }

        .select-all {
            font-weight: 500;
            margin-right: 59px;
            margin-left: 12px;
        }

        .fav-to {
            background: url('../../assets/pro/s_fav_to.svg') no-repeat;
            color: #fff;
            width: 123px;
            background-color: #F8004E;
            border-radius: 10px;
            background-position: 10% center;
            font-weight: 500;
            transition: .1s all linear;
            padding-left: 10px;

            &:hover {
                background-color: #0fab94;
            }
        }

        .download-to {
            background: url('../../assets/pro/s_down_to.svg') no-repeat;
            color: #fff;
            width: 123px;
            border-radius: 10px;
            background-position: 10% center;
            background-color: #F8004E;
            margin-left: 10px;
            font-weight: 500;
            transition: .1s all linear;
            padding-left: 10px;

            &:hover {
                background-color: #0fab94;
            }
        }

        .move-to {
            background: url('../../assets/pro/icon_move_to.svg') no-repeat;
            color: #fff;
            width: 123px;
            border-radius: 10px;
            background-position: 10% center;
            background-color: #F8004E;
            margin-left: 10px;
            font-weight: 500;
            padding-left: 10px;

            &:hover {
                background-color: #0fab94;
            }
        }
        
        .praise-to{
            background: url('../../assets/pro/img_like.svg') no-repeat;
            color: #fff;
            width: 123px;
            background-color: #F8004E;
            border-radius: 10px;
            background-position: 10% center;
            font-weight: 500;
            transition: .1s all linear;
            margin-left: 10px; 
            padding-left: 10px;
            &:hover {
                background-color: #0fab94;
            }
        }
    }

    &.active {
        z-index: 111;
        opacity: 1;
    }
}

.xgplayer .xg-left-grid {
    margin-left: 15px;
}

.xgplayer .xgplayer-controls {
    background: inherit;
    z-index: 11112;
}

.ant-modal div[aria-hidden="true"] {
    display: none !important
}

.video-data-item {
    .xgplayer {
        background: initial;
    }

    .xgplayer-play {
        visibility: hidden;
    }

    .xgplayer .xg-right-grid {
        display: none;
    }
}

.xgplayer-controls {
    visibility: visible !important;
    opacity: 1 !important;
}

.sys-notice-data {
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    ul {
        li {
            height: 48px;
            overflow: hidden;

            .tit {
                margin: 0px !important;
                width: 100% !important;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                // padding-right:20px;
                color: #fff;
                cursor: pointer;
                .tit-val {
                    width: 50%;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 25px;
                    // margin-bottom: 13px;
                    // margin-top: 14px;
                    white-space: nowrap;
                    width: 70%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .collapse-btn {
                    width: 16px;
                    height: 16px;
                    background: url('../../assets/pro/notice/msg_collapse.svg') no-repeat;
                    display: inline-block;
                    transition: .2s all linear;
                    margin-left: 3px;
                }

                .time-box {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: #969696;
                    line-height: 25px;
                }
            }

            .con {
                * {
                    color: #969696 !important;
                    background: inherit !important;
                }
            }

            &.collapse {
                .collapse-btn {
                    transform: rotate(180deg);
                }

                height:auto;

                .tit {
                    .tit-val {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

.ant-modal-wrap {
    z-index: 10001;
}
.kj-tip{
    // position: absolute;
    display: flex;
    grid-gap:5px;
    margin-right:10px;
    span{
        border:1px solid #424147;
        border-radius:6px;
        line-height:22px;
        font-size:12px;
        color:#969696;
        padding:0px 8px;
        cursor: pointer;
    }
}
.fav-component {
    // position: fixed;
    // width: 471px;
    // border-radius: 30px;
    background: #1C1C1E;
    // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    // z-index: 114;
    // top:30%;
    // left:calc((100% - 471px) / 2);
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    padding: 26px 29px;
    color: #fff;

    .fav-header {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        position: relative;
        line-height: 22px;
        color: #fff;

        .close-win {
            width: 20px;
            height: 20px;
            background: url('../../assets/pro/close_default.svg') no-repeat;
            background-size: cover;
            position: absolute;
            top: 0px;
            transition: .1s all linear;
            z-index: 102;
            right: 0px;

            &:hover {
                background: url('../../assets/pro/close_modal_page.svg') no-repeat;
                background-size: cover;
                transform: rotate(180deg);
            }
        }
    }

    .folder-con {
        .tit {
            color: #969696;
            font-size: 14px;
            line-height: 20px;
        }

        .search-bx {
            position: sticky;
            top: 20px;
            width: 100%;
            width: 100%;
            margin-top: 14px;
            margin-bottom: 20px;

            // max-width:892px;
            .cancel-search {
                background: url('../../assets/pro/cancel_search.svg');
                width: 20px;
                height: 20px;
                position: absolute;
                top: 14px;
                right: 70px;
            }

            form {
                display: flex;
                align-items: center;
                overflow: hidden;
                height: 40px;
                background-image: url('../../assets/pro/header/search_icon.svg');
                background-repeat: no-repeat;
                background-position: 13px center;
                background-size: 14px 14px;

                border-radius: 8px;
                background-color: #242327;
                padding-left: 30px;

                input {
                    height: 26px;
                    background-color: #242327;
                    // color:#848393;
                    border: none;
                    padding-left: 15px;
                    color: #fff;
                    width: 100%;
                    font-size: 14px;
                }
            }
        }

        .folders {
            max-height: 350px;
            overflow-y: auto;
            // padding-right: 20px;

            /*滚动条整体部分,必须要设置*/
            &::-webkit-scrollbar {
                width: 3px;
                height: 8px;
                background-color: transparent;
            }

            /*滚动条的轨道*/
            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background-color: #626262;
            }

            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button {
                height: 0;
            }

            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner {
                background-color: transparent;
            }
        }

        .folder-item {
            background: #23232A;
            border-radius: 8px;
            line-height: 58px;
            height: 58px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 10px;
            padding-right: 9px;
            transition:.1s all linear;
            border:1px solid #23232A;
            cursor: pointer;
            .left {
                display: flex;
                align-items: center;
                font-size: 16px;
                width:80%;
                .title-text{
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    overflow: hidden;
                }
                .img-box {
                    width: 38px;
                    min-width:38px;
                    height: 38px;
                    border-radius: 8px;
                    margin-right: 15px;
                    overflow: hidden;
                    background: #1C1C1E;
                    display: flex;
                    align-items: center;

                    img {
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .fav-btn {
                background: #11CCB1;
                width: 60px;
                min-width:60px;
                line-height: 38px;
                border-radius: 8px;
                color: #fff;
                text-align: center;
                font-size: 14px;
                opacity: 0;
                transition: .1s all linear;

                &:hover {
                    background: #0fab94;
                }
            }

            &:hover {
                border: 1px solid #11CCB1;

                .fav-btn {
                    opacity: 1;
                }
            }
        }

        .create-new-folder {
            line-height: 44px;
            border: 1px solid #333232;
            border-radius: 8px;
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 14px;
            span{
                background: url('../../assets/pro/create_folder.svg') no-repeat;
                background-position: left center;
                padding-left:25px;
            }

            &:hover {
                border-color: #11CCB1;
            }
        }
    }

    .create-form {
        font-size: 14px;

        input {
            line-height: 50px;
            border-radius: 8px;
            padding: 0px 24px 0px 17px;
            background: #171719;
            border: none;
            color: #fff;
            margin-top: 20px;
            width: 100%;
        }

        .textarea-control {
            position: relative;

            i {
                font-style: normal;
                position: absolute;
                right: 13px;
                bottom: 8px;
                font-size: 12px;
                color: #969696;
            }
        }

        textarea {
            padding: 13px 24px 0px 17px;
            height: 110px;
            border-radius: 8px;
            color: #fff;
            resize: none;
            width: 100%;
            background: #171719;
            margin-top: 20px;
            border: none;
        }
    }

    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30px;
        width: 100%;
        color: #fff;
        font-size: 16px;
        line-height: 40px;
        user-select: none;
        a {
            transition: .2s all linear;

            &:hover {
                opacity: .9;
            }
        }

        .pro-default-btn {
            width: 170px;
            text-align: center;
            background: #37363E;
            border-radius: 8px;
        }

        .pro-confirm-btn {
            width: 170px;
            text-align: center;
            background: #11CCB1;
            border-radius: 8px;

            &:hover {
                background: #0fab94;
            }
        }
    }


    .edit-pic-con {
        display: flex;
        .left{
        }
        .left-img {
            min-width: 273px;
            max-width:273px;
            background: #242327;
            display: flex;
            align-items: center;
            justify-content: center;border-radius: 10px;
            .img-box {
                // width: 100%;
                // height: 100%;
                // border-radius: 10px;
                // overflow: hidden;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
        }

        .rig-con {
            padding: 26px 29px;
            width:calc(100% - 273px);

            .tit {
                color: #969696;
                font-size: 14px;
                line-height: 20px;
                margin-top: 30px;
            }

            .textarea-control {
                position: relative;

                textarea {
                    padding: 13px 24px 0px 17px;
                    height: 110px;
                    border-radius: 8px;
                    color: #fff;
                    resize: none;
                    width: 100%;
                    background: #171719;
                    margin-top: 20px;
                    border: none;
                }

                i {
                    font-style: normal;
                    position: absolute;
                    right: 13px;
                    bottom: 8px;
                    font-size: 12px;
                    color: #969696;
                }
            }

            .search-bx {
                position: sticky;
                top: 20px;
                width: 100%;
                width: 100%;
                margin-top: 14px;
                margin-bottom: 20px;

                // max-width:892px;
                .cancel-search {
                    background: url('../../assets/pro/cancel_search.svg');
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 14px;
                    right: 70px;
                }

                form {
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    height: 40px;
                    background-image: url('../../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 13px center;
                    background-size: 14px 14px;

                    border-radius: 8px;
                    background-color: #242327;
                    padding-left: 30px;

                    input {
                        height: 26px;
                        background-color: #242327;
                        // color:#848393;
                        border: none;
                        padding-left: 15px;
                        color: #fff;
                        width: 100%;
                        font-size: 14px;
                    }
                }
            }

            .folders {
                max-height: 197px;
                overflow-y: auto;
                width:100%;
                // padding-right:5px;
                /*滚动条整体部分,必须要设置*/
                &::-webkit-scrollbar {
                    width: 3px;
                    height: 8px;
                    background-color: transparent;
                }

                /*滚动条的轨道*/
                &::-webkit-scrollbar-track {
                    background-color: transparent;
                }

                /*滚动条的滑块按钮*/
                &::-webkit-scrollbar-thumb {
                    border-radius: 3px;
                    background-color: #626262;
                }

                /*滚动条的上下两端的按钮*/
                &::-webkit-scrollbar-button {
                    height: 0;
                }

                /* 两个滚动条的交汇处 */
                &::-webkit-scrollbar-corner {
                    background-color: transparent;
                }
            }

            .folder-item {
                background: #23232A;
                border-radius: 8px;
                line-height: 58px;
                height: 58px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 10px;
                padding-right: 9px;
                cursor: pointer;
                overflow: hidden;
                .left {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    width:80%;
                    .img-box {
                        min-width:38px;
                        width: 38px;
                        height: 38px;
                        border-radius: 8px;
                        margin-right: 15px;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        background:#000;
                        img {
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    
                    .title-text{
                        white-space: nowrap;
                        text-overflow:ellipsis;
                        overflow: hidden;
                    }
                }

                .fav-btn {
                    background: #11CCB1;
                    width: 60px;
                    min-width:60px;
                    line-height: 38px;
                    border-radius: 8px;
                    color: #fff;
                    text-align: center;
                    font-size: 14px;
                    opacity: 0;
                    transition: .1s all linear;
                }

                &:hover {
                    border: 1px solid #11CCB1;

                    .fav-btn {
                        opacity: 1;
                    }
                }
            }

            .bot-btns {
                display: flex;
                align-items: center;
                justify-content: space-between;
                line-height: 40px;
                margin-top: 30px;
                justify-content: flex-end;
                // border:1px solid red;
                .del-btn {
                    font-size: 14px;
                    color: #FF5967;
                    white-space: nowrap;
                    // border:1px solid red;
                }


                .btns {
                    display: inherit;
                    width: max-content;
                    align-items: center;
                    margin-top: 0px;
                    // justify-content: space-between;
                    // margin-top:30px;
                    // width:100%;
                    color: #fff;
                    font-size: 16px;
                    user-select: none;

                    .pro-default-btn {
                        width: 100px;
                        text-align: center;
                        background: #37363E;
                        border-radius: 8px;
                    }

                    .pro-confirm-btn {
                        width: 100px;
                        text-align: center;
                        background: #11CCB1;
                        border-radius: 8px;
                        margin-left: 15px;
                    }
                }
            }

            .create-new-folder {
                line-height: 44px;
                border: 1px solid #333232;
                border-radius: 8px;
                display: inline-block;
                width: 100%;
                text-align: center;
                font-size: 14px;
                background: url('../../assets/pro/create_folder.svg') no-repeat;
                background-position: 32% center;
                padding-left: 29px;

                &:hover {
                    border-color: #11CCB1;
                }
            }
        }
    }
}



.modal-mask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 111;
    opacity: 0;
    cursor: default;
}

.flex-end {
    justify-content: flex-end !important;

    >a {
        width: 100px !important;

        &:last-child {
            margin-left: 20px;
        }
    }
}

.m-widbtns {
    padding: 0px 39px;

    a {
        width: 100px !important;
    }
}

.outer-box {
    position: absolute;
    outline: 4px solid #ff3941;
    outline-offset: 6px;
    z-index: 1;
}

.img-tag-pop {
    max-width: 278px;
    border-radius: 16px;
    padding: 20px 21px;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);

    .popper__arrow {
        display: none;
    }
}
.emo-info-pop{
    border-radius:8px;
    padding:0px;
    min-width:inherit;
}
.emo-s-tip{
    padding:10px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    color:#8f8f8f;
    .text{
        color:#dbdbdb;
        font-style: normal;
    }
}
.send-box .el-popover__reference-wrapper{
    display: flex;
}
.custom-face-pop {
    padding: 0px;
    border-radius:16px;
    margin-top:23px !important;
    margin-bottom:23px !important;
}
.job-custom-face-pop{
    padding:0px;
    padding-top:1px;
    overflow: hidden;
}

.custom-face {
    width: 360px;
    // height: 255px;
    padding: 22px 23px;

    table {
        width: 100%;
    }

    tr {
        line-height: 38px;

        td {
            text-align: center;

            img {
                cursor: pointer;
                transition: .1s all linear;
                vertical-align: middle;
                border-radius: 34px;
                width: 20px;
                height: 20px;

                &:hover {
                    box-shadow: 0 1px 5px 5px #5b5b5b;
                    border-radius: 34px;
                    transform: scale(1.2);
                }
            }
        }
    }
}


.publish-job-win-mask {
    opacity: .7 !important;
}

.publish-job-win{
    .form-field-item{
        .ql-editor{
            color:#fff;
        }
    }
}

.recruit-cur-bg {
    .cur {
        background-color: #171719;
        background-position: 96% center;
    }
}

.about-con-box {
    * {
        color: #fff !important;
    }
}

.con-html {
    img {
        vertical-align: middle;
        width: 25px;
    }
}
.img-water-fall{
    margin-left:-20px;
}
.comment-inp {
    textarea {
        &::placeholder {
            color: #EAEAEA;
        }
    }
}

.img-datas {
    margin-top: 21px;
    width:100%;
    .img-list{
        width:100%;
        
        .vue-waterfall{
            // width:101%;
            // margin-left: -1%;
        }
    }
    // padding-bottom: 100px;
    // .waf-ligan-item {
    //     position: absolute;
    //     top: 10px;
    //     left: 10px;
    //     right: 10px;
    //     bottom: 10px;
    //     font-size: 1.2em;
    //     border: 1px solid #111;
    //     border-radius: 16px;
    //     transition: .1s all linear;

    //     .m-img {
    //         border-radius: 16px;
    //         height: 100%;
    //         width: 100%;
    //         object-fit: cover;
    //     }

    //     .author {
    //         position: absolute;
    //         bottom: 10px;
    //         cursor:default;
    //         left: 10px;
    //         background: rgba(255, 255, 255, 0.9);
    //         border-radius: 12px;
    //         padding: 10px 13px;
    //         transition: 0.1s all linear;
    //         width: 164px;
    //         z-index:111;
    //         &:hover {
    //             background: rgba(255, 255, 255, 1);
    //         }

    //         .ar-tit {
    //             font-size: 14px;
    //             font-weight: 500;
    //             color: #383737;
    //             line-height: 20px;
    //             margin-bottom: 5px;
    //             white-space: nowrap;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //             background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
    //             background-position: left center;
    //             padding-left: 22px;
    //             width: 100%;
    //             display: inline-block;
    //         }

    //         .u-box {
    //             display: flex;
    //             padding-left: 20px;

    //             .name {
    //                 font-size: 14px;
    //                 color: #969696;
    //                 font-weight: 500;
    //                 white-space: nowrap;
    //                 overflow: hidden;
    //                 text-overflow: ellipsis;
    //             }

    //             .avatar {
    //             width: 20px;
    //             height: 20px;
    //             border-radius: 20px;
    //             margin-right: 7px;
    //             }
    //         }
    //     }
    //     .fav-btn{
    //         background-color: #11CCB1;
    //         color: #fff;
    //         height: 44px;
    //         line-height: 44px;
    //         // width:82px;
    //         position: absolute;
    //         top: 10px;
    //         right: 60px;
    //         font-size: 14px;
    //         border-radius: 12px;
    //         cursor: pointer;
    //         background-image: url('../../assets/pro/un_favicon.svg');
    //         background-repeat: no-repeat;
    //         background-position: 11px center;
    //         padding-left: 35px;
    //         padding-right: 12px;
    //         &:hover {
    //         background-color: #f34972;
    //         }
    //     }

    //     .faved-btn {
    //     background-color: #fff;
    //     color: #000;
    //     height: 44px;
    //     line-height: 44px;
    //     // width:82px;
    //     position: absolute;
    //     top: 10px;
    //     right: 10px;
    //     font-size: 14px;
    //     border-radius: 12px;
    //     cursor: pointer;
    //     background-image: url('../../assets/pro/faved_icon.svg');
    //     background-repeat: no-repeat;
    //     background-position: 11px center;
    //     padding-left: 35px;
    //     padding-right: 12px;
    //     opacity: 0.9;
    //     &:hover {
    //         opacity: 1;
    //     }
    //     }
    //     .select-btn{
    //         width:20px;height:20px;
    //         position: absolute;
    //         z-index:2;
    //         cursor: default;
    //         left:10px;top:10px;
    //         background:url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
    //         background-size:cover;
    //         &.active{
    //             background:url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
    //             background-size:cover;
    //         }
    //     }
    //     .xs-img-btn {
    //         background-image: url('../../assets/pro/xs_img_cion.svg');
    //         background-repeat: no-repeat;
    //         background-position: center center;
    //         width: 34px;
    //         height: 34px;
    //         position: absolute;
    //         right: 13px;
    //         bottom: 14px;
    //         background-color: #fff;
    //         border-radius: 12px;
    //         cursor: pointer;
    //         opacity: 0.9;
    //         &:hover {
    //             opacity: 1;
    //         }
    //     }
    //     .like-img-btn{
    //         background-image: url('../../assets/pro/icon_like.svg');
    //         background-repeat: no-repeat;
    //         background-position: center center;
    //         width: 40px;
    //         height: 40px;
    //         position: absolute;
    //         top: 10px;
    //         right: 10px;
    //         background-color: #fff;
    //         border-radius: 12px;
    //         cursor: pointer;
    //         opacity: 0.9;
    //         &:hover {
    //             opacity: 1;
    //         }
    //         &.active{
    //             background-image: url('../../assets/pro/icon_liked.svg');
    //             background-repeat: no-repeat;
    //             background-position: center center;
    //         }
    //     }
    //     .hid-el{
    //         // display: none;
    //         transition:.1s all linear;
    //         opacity:0;
    //     }
    //     &:hover{
    //         border:2px solid #11CCB1;
    //         .hid-el{
    //             // display: inline-block;
    //             opacity:1;

    //         }
    //     }
    //     &.active{
    //         border:2px solid #11CCB1;
    //         .select-btn{
    //             // display: inline-block;
    //             opacity:1;
    //         }
    //     }
    // }
}

.cropper-line {
    display: none;
}

.cropper-modal{
    border-radius: 16px !important;
}
.cropper-point.point-n,
.cropper-point.point-e,
.cropper-point.point-w,
.cropper-point.point-s {
    background: none;
}

.cropper-view-box {
    outline: none;    
    border-radius: 16px;
}

.cropper-dashed {
    border: none;
}

.cropper-bg {
    background-image: none;
}

.basic-img-box .cropper-container img {
    border-radius: 16px !important;
}

.cropper-point.point-nw {
    width: 26px;
    height: 26px;
    border: 4px solid #fff;
    border-width: 4px 0 0 4px;
    border-top-left-radius: 16px;
    background: none;
}

.cropper-point.point-ne {
    width: 26px;
    height: 26px;
    border: 4px solid #fff;
    border-width: 4px 4px 0px 0px;
    border-top-right-radius: 16px;
    background: none;
}

.cropper-point.point-sw {
    width: 26px;
    height: 26px;
    border: 4px solid #fff;
    border-width: 0px 0px 4px 4px;
    border-bottom-left-radius: 16px;
    background: none;
}

.cropper-point.point-se {
    width: 26px;
    height: 26px;
    border: 4px solid #fff;
    border-width: 0px 4px 4px 0px;
    border-bottom-right-radius: 16px;
    background: none;
}

.gp-filter {
    display: flex;
    align-items: center;
    margin: 30px 0px;
    position: sticky;
    top: 84px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    z-index: 111;

    >* {
        white-space: nowrap;
    }

    .label-filter {
        margin-left: 20px;
        display: flex;
        align-items: center;
        line-height: 44px;

        .tit {
            font-size: 14px;
            color: #969696;
        }

        >span {
            display: inline-block;
        }

        .plat-items {
            display: flex;
            align-items: center;

            .pitem {
                width: 30px;
                height: 30px;
                margin-left: 10px;
                border-radius: 8px;
                display: inline-block;
                cursor: pointer;
                transition: .1s all linear;

                &.windows {
                    background: url('../../assets/pro/pc_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/pc_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.xbox {
                    background: url('../../assets/pro/xbox_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/xbox_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.switch {
                    background: url('../../assets/pro/zj_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/zj_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.apple {
                    background: url('../../assets/pro/mobile_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/mobile_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.h-screen {
                    background: url('../../assets/pro/hb_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/hb_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.s-screen {
                    background: url('../../assets/pro/sp_normal_icon.svg') no-repeat;
                    background-size: cover;

                    &.active {
                        background: url('../../assets/pro/sp_press_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.active {
                    background-color: #1D1D1F;
                }
            }
        }

        .lbs-slider {
            min-width: 200px;

            .lbs-slider-control {
                padding-left: 20px;

                .el-slider__bar {
                    background: #38383B;
                }

                .el-slider__button {
                    border-color: #969696;
                    background: #969696;
                }

                .el-slider__runway {
                    background: #38383B;

                    .el-slider__button-wrapper {
                        z-index: 100;
                    }
                }
            }
        }
    }

    .seach-bx {
        width: 100%;
        margin-left: 20px;
        // margin-right: 10px;
        transition:.1s all linear;
        border:1px solid transparent;
        position: relative;
        overflow-y:auto;
        &.is-nuvisit,&.active{
            border:1px solid #11CCB1;
        }
        input {
            height: 40px;
            line-height: 40px;
            // border-radius: 8px;
            border: none;
            padding-left:4px;
            color: #fff;
            width: 100%;
            font-size: 14px;
            transition: .1s all linear;
            padding-right:34px;
            // background-image: url('../../assets/pro/header/search_icon.svg');
            // background-repeat: no-repeat;
            // background-position: 14px center;
            // background-size: 16px 16px;

            &::-webkit-input-placeholder {
                color: #969696;
            }

            &.active {
                background-color: #262628;
            }
        }
        
    }

    // .mk-cus-ddl {
    //     cursor: pointer;
    //     position: relative;

    //     &:hover {
    //         .sub-dd-block {
    //             display: inline-block;
    //             z-index: 111;
    //         }
    //     }

    //     .cur {
    //         background: #29272f;
    //         line-height: 44px;
    //         height:44px;
    //         border-radius: 8px;
    //         min-width: 108px;
    //         // text-align: center;
    //         display: inline-block;
    //         // padding: 0px 30px;
    //         padding: 0px 11px 0px 16px;
    //         font-size: 14px;
    //         font-weight: 500;
    //         background-image: url('../../assets/pro/page_ddl_down_arrow.svg');
    //         background-repeat: no-repeat;
    //         background-position: 90% center;
    //         background-size: 14px 14px;
    //     }

    //     .sub-dd-block {
    //         position: absolute;
    //         top: 40px;
    //         left: 0px;
    //         display: none;
    //         padding-top: 10px;

    //         .sub-ddls {
    //             background: #29272f;
    //             border-radius: 16px;
    //             padding: 8px 9px;
    //             font-size: 16px;
    //             min-width: 150px;

    //             li {
    //                 line-height: 43px;
    //                 overflow: hidden;
    //                 border-radius: 8px;

    //                 a {
    //                     display: inline-block;
    //                     user-select: none;
    //                     width: 100%;
    //                     height: 100%;
    //                     white-space: nowrap;
    //                     text-align: center;

    //                     &:hover {
    //                         background: #201d28;
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
}

.no-tip{
    display: none;
}
.bs-layout {
    padding: 0px 15px;
    line-height: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-left:20px;
    .plat-items {
        display: flex;
        align-items: center;

        span {
            width: 34px;
            height: 30px;
            display: inline-block;
            cursor: pointer;

            &.f-layout {
                background: url('../../assets/pro/m_normal_icon.svg') no-repeat;
                background-size: 20px 20px;
                background-position: center;
                margin-right: 9px;

                &.active {
                    background: url('../../assets/pro/m_normal_press_icon.svg') no-repeat;
                    background-size: 20px 20px;
                    background-position: center;
                    background-color: #37363E;
                    padding: 5px 8px;
                    border-radius: 6px;
                }
            }

            &.mup-layout {
                background: url('../../assets/pro/s_normal_icon.svg') no-repeat;
                background-size: 20px 20px;
                background-position: center;

                &.active {
                    background: url('../../assets/pro/s_normal_press_icon.svg') no-repeat;
                    background-size: 20px 20px;
                    background-position: center;
                    padding: 5px 8px;
                    border-radius: 6px;
                    background-color: #37363E;
                }
            }
        }
    }
}

.bs-g-flabel {
    background-image: url('../../assets/pro/mg_filter_icon.svg');
    background-repeat: no-repeat;
    line-height: 44px;
    height:44px;
    padding: 0px 20px 0px 30px;
    min-width: 92px;
    text-align: center;
    background-position: 10px center;
    background-size: 20px 20px;
    margin-left:20px;
    font-size: 14px;
    border-radius: 8px;
    position: relative;

    &:hover {
        .games-filter {
            display: inline-block;
            opacity: 1;
            z-index: 11;
        }
    }

    .cur {
        cursor: pointer;
        user-select: none;
    }

    .games-filter {
        position: absolute;
        transition: 0.1s all linear;
        top: 44px;
        z-index: -1;
        right: 0px;
        width: 547px;
        padding-top: 10px;
        opacity: 0;
        display: none;
        animation: hdpanel .3s ease forwards;

        .games-filter-wrap {
            padding: 30px;
            background: #23232a;
            border-radius: 30px;
            box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
            &.color-wrap{
                border-radius:16px;
            }
            .rtzd{
                .rtzd-box{
                    display: flex;
                    align-items: center;
                    grid-gap:20px;
                }
                .el-slider{
                    width:100%;
                    .el-slider__bar {
                        background: #38383B;
                    }
    
                    .el-slider__button {
                        border-color: #969696;
                        background: #969696;
                    }
    
                    .el-slider__runway {
                        background: #38383B;
    
                        .el-slider__button-wrapper {
                            z-index: 100;
                        }
                    }
                }
            }
            .filter-search {
                // margin-bottom: 20px;
                position: relative;

                input {
                    background: #171719;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px;
                    border: none;
                    padding-left: 36px;
                    color: #fff;
                    width: 100%;
                    font-size: 14px;
                    background-image: url('../../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 14px center;
                    background-size: 16px 16px;
                }

                .clear-key-btn {
                    width: 20px;
                    height: 20px;
                    background-image: url('../../assets/pro/input_clear.svg');
                    display: inline-block;
                    position: absolute;
                    right: 10px;
                    top: 12px;
                    cursor: pointer;
                }
            }

            .filter-g-tab {
                display: flex;
                align-items: center;
                font-size: 16px;
                color: #969696;
                line-height: 22px;
                // margin-bottom:19px;

                span {
                    margin-right: 40px;
                    cursor: pointer;
                    user-select: none;
                }

                .active {
                    color: #fff;
                    font-weight: 500;
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -5px;
                        left: calc((100% - 24px) / 2);
                        height: 2px;
                        border-radius: 2px;
                        background: #fff;
                        display: inline-block;
                        width: 24px;
                    }
                }
            }

            &.mul-wrap {
                .filter-g-tab {
                    margin-bottom: 0px;
                }
            }

            .gft-data-box {

                // margin-bottom:20px;
                .data-ul {
                    display: flex;
                    flex-wrap: wrap;
                    grid-gap: 12px;

                    max-height: 160px;
                    overflow-y: auto;

                    li {
                        // margin-right: 14px;
                        // margin-bottom: 12px;
                        width: 86px;
                        text-align: center;
                        line-height: 30px;
                        border-radius: 30px;
                        overflow: hidden;
                        user-select: none;

                        &:nth-child(9n) {
                            // margin-right: 0px;
                        }

                        a {
                            display: inline-block;
                            width: 100%;
                            background: #37363e;
                            transition: 0.1s all linear;
                            color: #fff;

                            &:hover {
                                background: #111;
                            }

                            &.active {
                                background: #11CCB1;
                            }
                        }
                    }
                }
            }
        }

        .bot-btns {
            text-align: right;
            margin-top: 10px;

            // border-top: 1px solid #2e2e2e;
            // padding-top:30px;
            a {
                line-height: 40px;
                border-radius: 8px;
                font-weight: 500;
                display: inline-block;
                width: 100px;
                user-select: none;
                text-align: center;
                transition: .2s all linear;

                &:active {
                    opacity: .8;
                }
            }

            .cancel {
                background: #37363e;
                color: #fff;
                margin-right: 15px;
            }

            .confirm {
                background: #11CCB1;
                color: #fff;

                &:hover {
                    background: #0fab94;
                }
            }
        }

        &.gpic-flt {
            width: 446px;

            .games-filter-wrap {
                padding: 26px 27px 26px 27px;

                .gft-data-box {

                    &.colors {
                        li {
                            width: 30px;
                            height: 30px;
                            border-radius: 30px;

                            a {
                                display: inline-block;
                                height: 100%;
                            }
                        }
                    }
                }
            }

            .bot-btns {
                border-top: 1px solid #2e2e2e;
                padding-top: 18px;
            }
        }
    }

    &.gpic-clr {
        background-image: url('../../assets/pro/page_ddl_down_arrow.svg');
        background-repeat: no-repeat;
        background-position: 90% center;
        background-size: 14px 14px;
        width: 100px;
        padding-left: 12px;
        min-width: 100px;
        text-align: left;
        border:1px solid transparent;
        .cur {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: space-between;

            .query-color {
                width: 14px;
                height: 14px;
                border-radius: 14px;
            }

            .clear-by-search {
                width: 14px;
                height: 14px;
                background: url('../../assets/pro/cancel_search.svg') no-repeat;
                background-size: cover;
                position: relative;
                right: -12px;
            }
        }

        .games-filter {
            width: 208px;
            top: 40px;
            padding-top: 10px;

            .games-filter-wrap {
                padding: 20px;

                .gft-data-box {
                    .data-ul {
                        &.colors {
                            align-items: center;
                            justify-content: center;

                            li {
                                width: 30px;
                                height: 30px;
                                border-radius: 30px;

                                a {
                                    display: inline-block;
                                    height: 100%;
                                }

                                &:nth-child(4n) {
                                    margin-right: 0px;
                                }

                                &:nth-last-child(1),
                                &:nth-last-child(2),
                                &:nth-last-child(3),
                                &:nth-last-child(4) {
                                    margin-bottom: 0px;
                                }

                                &.active {
                                    a {
                                        transition: none;
                                        background-image: url('../../assets/pro/clr_active.svg');
                                        background-position: center;
                                        background-repeat: no-repeat;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        &.is-fenw{
            border-color:#11CCB1;
        }
    }

}

.custom-inner-form{
    background: #242327;
    border-radius: 22px;
    padding-right:100px;
    padding-left:20px;
    .custom-inner-input{
        width:100%;
        border: none;
        border: none;
        min-height:44px;
        padding-top:10px;
        padding-bottom:10px;
        // height:44px;
        // overflow: hidden;
        // white-space: nowrap;
        // padding-left: 16px;
        font-size: 14px;
        color: #fff;
        // border-radius: 22px;
        // padding-right:100px;
        border:1px solid transparent;
        transition:.1s all linear;
        img{
            width:20px;
            margin-right:5px;
        }
    }
}
.uhome .fav-datas .fav-d-item,.following-page .games .fav-d-item,.game-list-page .games .fav-d-item{
    &:hover{
        .img-flex-box{
            .cate-dsc{
                display:inherit;
            }
        }
    }
}
.game-list-page .games-data .gd-item,.games-page .games-data .gd-item,.all-games .data-wrap.big .bdl-data-item{
    &:hover{
        .mimg-box{
            .cate-dsc{
                display:inherit;
            }
        }
    }
}

.following-page .games .fav-d-item .img-flex-box{
    .cate-dsc{
        position: absolute;
        bottom:10px;
        left:10px;
        right:10px;
        z-index:1;
        display: none;
    }
    &:after{
        content:'';
        height:50%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0,1) 100%);
        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    }
}
.uhome .fav-datas .fav-d-item .img-flex-box{
    .mbasic-mask{
        height:50%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0,1) 100%);
        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    }
    .cate-dsc{
        position: absolute;
        bottom:10px;
        left:10px;
        right:10px;
        z-index:1;
        display: none;
    }
    img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
    .pnum {
        background: url('../../assets/pro/icon_pic.svg') no-repeat;
        background-position: left center;
        padding-left:18px;
        position: absolute;
        bottom:10px;
        right:10px;
        z-index:1;
        font-size:12px;
    }
}
.mimg-box:not(.has-after),.search-page .list-box .bdl-data-item .t-imgs{
    position: relative;
    .pnum {
        background: url('../../assets/pro/icon_pic.svg') no-repeat;
        background-position: left center;
        padding-left:18px;
        position: absolute;
        bottom:10px;
        right:10px;
        z-index:1;
        font-size:12px;
    }
    .cate-dsc{
        position: absolute;
        bottom:10px;
        left:10px;
        right:10px;
        z-index:1;
        display: none;
    }
    &:after{
        content:'';
        height:50%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0,1) 100%);
        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    }
    img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
}

.mimg-box.has-after{
    position: relative;
    .pnum {
        background: url('../../assets/pro/icon_pic.svg') no-repeat;
        background-position: left center;
        padding-left:18px;
        position: absolute;
        bottom:10px;
        right:10px;
        z-index:1;
        font-size:12px;
    }
    .cate-dsc{
        position: absolute;
        bottom:10px;
        left:10px;
        right:10px;
        z-index:1;
        display: none;
    }
    &:after{
        content:'';
        height:50%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0,1) 100%);
        background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    }
    img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
}

.search-page .first-result-row .result-item{
    &:nth-child(2){
        .mu-items-box .bdl-data-item .t-imgs{
            .pnum {
                background: url('../../assets/pro/icon_pic.svg') no-repeat;
                background-position: left center;
                padding-left:18px;
                position: absolute;
                bottom:10px;
                right:10px;
                z-index:1;
                font-size:12px;
            }
            &:after{
                content:'';
                height:30%;
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0,1) 100%);
            }
        }
    }
}
.game-page .center-info .xg-games .bdl-data-item .basic-info .bot-desc{
    .pnum {
        background: url('../../assets/pro/icon_pic.svg') no-repeat;
        background-position: left center;
        padding-left:18px;
      }
}
@media (min-width:2160px) {
    .works-list-page .games-data .dx-vd-item, 
    .article-list-page .games-data .dx-vd-item,
    .uhome .fav-datas .fav-d-item,
    .game-list-page .games .fav-d-item,
    .following-page .games .fav-d-item,
    .game-list-page .games-data.big .gd-item, 
    .games-page .games-data.big .gd-item,
    .search-page .list-box .bdl-data-item,
    .search-page .list-wrap.wk-list-area .list-box .bdl-data-item
    {
        // width:calc((100% - 100px) / 6) !important;
    }

    .hot-row{
        li{
            height:273px;
            .img-box{
                height:273px;
            }
        }
    }
    .game-page .center-info .mx-1566{
        // max-width:88% !important;
        .imgs-area{
            .gm-imgs{
                .img-item{
                    width:calc((100% - 80px) / 5);
                }
                &.sp-columns{
                    .img-item{
                        width:calc((100% - 80px) / 5);
                    }
                }
            }
        }
    }
    .search-page .jitu-wrap .data-box{
        width:calc((100% - 140px) / 8) !important;
    }
    .follow-exclusive-settings .users .user-item{
        width:calc((100% - 100px) / 6) !important;
    }
    .center-b-area .b-a-left .ba-datas .bdl-data-item{
        width:calc((100% - 100px) / 6) !important;
    }
    .collections-page .fav-datas .fav-d-item{
        width:calc((100% - 120px) / 7) !important;
    }
    .browse-records .games-data .dx-vd-item{
        width:calc((100% - 120px) / 7) !important;
    }
    .following-page .atlas-layout-column .fav-d-item{
        width:calc((100% - 120px) / 7) !important;
    }
    .atlas-layout-column .fav-d-item{
        width:calc((100% - 120px) / 7) !important;
    }
    .games-page .top-games li{
        height:230px !important;
    }
    .games-page .top-games li:nth-child(1),.games-page .top-games li:nth-child(2),.games-page .top-games li:nth-child(3){
        height:430px !important;
    }
    .following-page .users .user-item{
        width:calc((100% - 100px) / 6);
    }
    .u-set-layout .set-layout-con{
        min-width:1080px !important;
    }
}

@media (max-width:1920px) {
    .center-b-area .b-a-left .ba-datas .bdl-data-item{
        &:nth-child(n+9){
            display: none;
        }
    }
    
    .game-page .center-info .mx-1566{
        // max-width:88% !important;
        .imgs-area{
            .gm-imgs{
                .img-item{
                    width:calc((100% - 60px) / 4);
                }
                &.sp-columns{
                    .img-item{
                        width:calc((100% - 80px) / 5);
                    }
                }
            }
        }
    }
    .pro-page-bar {
        right: 0px;
    }

    .left-nav {
        left: 0px;
    }

    .layout-container {
        .games-page .games-data.big {
            .gd-item {
                width: calc((100% - 80px) / 5);
            }
        }
    }
    .all-games .data-wrap.big .bdl-data-item,.uhome .fav-datas .fav-d-item,.search-page .list-box .bdl-data-item,.following-page .games .fav-d-item{
        width: calc((100% - 80px) / 5);
    }
}

@media (max-width:1829px) {
    // .game-page .center-info .mx-1566{
    //     .imgs-area{
    //         .gm-imgs{
    //             .img-item{
    //                 width:calc((100% - 80px) /5);
    //             }
    //             &.sp-columns{
    //                 .img-item{
    //                     width:calc((100% - 160px) / 9);
    //                 }
    //             }
    //         }
    //     }
    // }
    .layout-container {
        .games-data.big {
            .gd-item {
                width: calc((100% - 60px) / 4);
                // height: 302px;
            }
        }
    }
    .rank-page{
        padding-left:100px !important;
    }
    .comp-article-page{
        .article-top{
            max-width:85% !important;
        }
        .tj-box {
            max-width:85% !important;
        }
    }
    .search-page .first-result-row{
        flex-wrap: wrap;
        grid-gap:20px;
    }
    .mx-1566{
        max-width:80% !important;
    }
    .search-page {
        .video-wrap.vd-list-area {
            .data-box {
                width: calc((100% - 60px) / 4)
            }
        }

        .jitu-wrap {
            .data-box {
                width: calc((100% - 80px) / 5)
            }
        }

        .list-box {
            .bdl-data-item {
                width: calc((100% - 80px) / 5)
            }
        }
    }

    .be-simliar {
        flex-wrap: wrap;

        .bs-layout-left-img {
            display: none;
        }
    }

    .uhome {
        .video-datas {
            .fav-d-item {
                width: calc((100% - 60px) / 4);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 80px) / 5);
            }
        }
    }

    .homes {
        .ald-ba-data {
            .data-wrap {
                .bdl-data-item {
                    width: calc((100% - 100px) / 6);
                }
                &.big{
                    .bdl-data-item{
                        width: calc((100% - 60px) / 4);
                        // height: 302px;
                    }
                }
            }
        }
    }

    .follow-exclusive-settings,.following-page {
        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 60px) / 4);
            }
        }

        .atlas-list {
            .atla-item {
                width: calc((100% - 60px) / 4);
            }
        }
    }
}

@media (max-width:1680px) {
    
    .game-page {
        .game-top .basic{
            // padding:88px 10px 0px 60px !important;
            
            .game-desc,.gm-tag-box{
                max-width:55% !important;
            }
        }
    }
    .rank-page{
        padding-left:0px !important;
    }
    .layout-container {
        .game-list-page {
            .games {
                .fav-d-item {
                    width: calc((100% - 60px) / 4);
                }
            }
        }
    }

    .search-page {
        .video-wrap.vd-list-area {
            .data-box {
                width: calc((100% - 40px) / 3)
            }
        }

        .jitu-wrap {
            .data-box {
                width: calc((100% - 60px) / 4)
            }
        }

        .list-box {
            .bdl-data-item {
                width: calc((100% - 60px) / 4)
            }
        }
    }

    .game-tab-page {
        .list-box {
            .bdl-data-item {
                width: calc((100% - 80px) / 5);
            }
        }
    }

    .uhome {
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 60px) /4);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 60px) / 4);
            }
        }
    }

    .layout-container {
        .homes{
            .ald-ba-data{
                .data-wrap{
                    &.big{
                        .bdl-data-item{
                            width: calc((100% - 60px) / 4);
                        }
                    }
                }
            }  
        }
        .games-page {
            .games-data.small {
                .gd-item {
                    width: calc((100% - 80px) / 5);
                }
            }

            .games-data.big {
                .gd-item {
                    width: calc((100% - 60px) / 4);
                }
            }
        }

        .content-box {
            .dx-vd-item {
                width: calc((100% - 60px) / 4);
            }
        }

        .following-page{
            .mk-rd-datas{
                .games{
                    .fav-d-item {
                        width: calc((100% - 60px) / 4);
                    }
                }
            }
        }

        .game-list-page {
            .games-data {
                .gd-item {
                    width: calc((100% - 80px) / 5);
                }

                &.show-filter {
                    .gd-item {
                        width: calc((100% - 40px) / 3);
                    }
                }
            }
        }

        .ald-ba-data {
            .data-wrap {
                .bdl-data-item {
                    width: calc((100% - 80px) / 5);
                }
            }
        }

        .videos-list-page {
            .games-data {
                .dx-vd-item {
                    width: calc((100% - 60px) / 4);
                }
            }
        }
    }
}

@media (max-width:1460px) {
    
    // .game-page .center-info .mx-1566{
    //     .imgs-area{
    //         .gm-imgs{
    //             .img-item{
    //                 width:calc((100% - 60px) /4);
    //             }
    //             &.sp-columns{
    //                 .img-item{
    //                     width:calc((100% - 160px) / 9);
    //                 }
    //             }
    //         }
    //     }
    // }
    .layout-container {
        .games-data.big {
            .gd-item {
                width: calc((100% - 40px) / 3) !important;
                // height: 302px;
            }
        }
    }
    .rank-page{
        // flex-direction: column;
        padding-left:0px !important;
        .rank-l{
            // width:59%;
            // max-width:59% !important;
            // min-width:59% !important;
            .top-line{
                .filter{
                    margin-left:20px;
                }
            }
        }
        .rank-r{
            // min-width:100% !important;
            // max-width:100% !important;
            // margin-top:20px;
            // max-height:100% !important;
            // .list-box{
            //     width:100%;
            //     min-width:inherit;
            //     flex-direction: row;
            //     .list-item{
            //         min-width:calc((100% - 20px) / 2);
            //         width:calc((100% - 20px) / 2);
            //     }
            // }
        }
    }
}

@media (max-width:1440px) {
    .homes{
        .wp-1432{
            max-width:90%;
        }
        .nine-home-covers{
            li{
                height:280px;
            }
        }
        .n-h-hot-games{
            li{
                width:calc((100% - 54px) / 4);
            }
        }
        .near-by-articles{
            .games-data{
                .dx-vd-item{

                }
            }
        }
    }
    .zw-fn-sch-el{
        max-width:calc(100% - 400px);
    }
    .gp-img-layout{
        .label-filter{
            display: none;
        }
    }
    .recruit-page{
        .recruit-page-conbox{
            .layout-box{
                .job-item{
                    .pos-name,.cpy-name{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width:160px;
                    }
                }
            }
        }
    }
    .game-page .game-top{
        .basic{
            max-width:80%;
            padding-left:0px !important;
            padding-right:0px !important;
            left:calc((100% - 80%) / 2) !important;
            width:100%;
            max-width:100%;
        }
        .pro-marquee-comments{
            // right:80px;
        }
    }
    
    .game-page .center-info .gm-imgs .img-item{
        width:calc((100% - 60px) /4) !important;
    }
    .mx-1566{
        // max-width:1240px !important;
    }
    .column-filter{
        display: none !important;
    }
    .zw-fn-sch-el{
        // max-width: calc(100% - 700px);
    }
    .info-right-bar{
        right:20px;
    }
    .layout-container {
        .game-list-page {
            .games {
                .fav-d-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }
    }

    .search-page {
        .video-wrap.vd-list-area {
            .data-box {
                width: calc((100% - 20px) / 2)
            }
        }

        .jitu-wrap {
            .data-box {
                width: calc((100% - 40px) / 3)
            }
        }
    }

    .game-list-page {
        .games-data {
            &.small.show-filter {
                .gd-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }
    }

    .game-tab-page {
        .list-box {
            .bdl-data-item {
                width: calc((100% - 60px) / 4);
            }
        }
    }

    .uhome {
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 40px) /3);
            }
        }

        .video-datas {
            .fav-d-item {
                width: calc((100% - 40px) / 3);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 40px) / 3);
            }
        }
    }

    body {
        overflow-x: hidden;
    }

    .hot-row {
        li {
            width: calc((100% - 60px) / 4) !important;

            &:nth-child(4) {
                display: none;
            }
        }
    }

    .center-b-area {
        .b-a-left {
            .ba-datas {
                .bdl-data-item {
                    width: calc((100% - 60px) / 4) !important;
                    // height: 259px !important;

                    // &:nth-child(n+7) {
                    //     display: none;
                    // }
                }
            }
        }
    }


    .games-page {
        .gp-filter{
            .zw-fn-el{
                max-width:100% !important;
            }
        }
        .games-data.small {
            .gd-item {
                width: calc((100% - 80px) / 5);
            }
        }
    }

    .left-nav {
        left: 0px;
    }

    .hot-gx-data {
        .item {
            height: 48px !important;
            margin-bottom: 23px !important;
        }
    }

    .center-b-area .b-a-right {
        width: 50% !important;
    }

    .layout-container {
        .games-page {
            .top-games {
                li {
                    width: calc((100% - 60px) / 4);

                    &:nth-child(1),
                    &:nth-child(2) {
                        width: calc((100% - 20px) / 2);
                    }

                    &:nth-child(3) {
                        width: calc((100% - 60px) / 4);
                        height: 178px !important;
                    }

                    &:nth-child(n+7) {
                        display: none;
                    }
                }
            }

            .games-data.small {
                .gd-item {
                    width: calc((100% - 60px) / 4);
                }
            }

            .games-data.big {
                .gd-item {
                    width: calc((100% - 60px) / 4);
                }
            }
        }
    }

    .works-page,
    .article-page {
        .wp-content-lft {
            margin-left: 0px;

            .wct-wrap {
                width: 600px;

                .work-datas {
                    .wk-d-item {
                        min-height:inherit;
                        .img-box {
                            height: 360px;
                        }
                    }
                }
            }
        }
    }

    .collections-page {
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 60px) / 4);
            }
        }
    }

    .browse-records {
        .bw-records {
            li {
                width: 275px;
                min-width: 275px;
                height: 128px;

                &:nth-child(4n) {
                    margin-right: 0px;
                }

                &:nth-child(5n) {
                    margin-right: 20px;
                }
            }
        }
    }

    .follow-exclusive-settings,.following-page {
        .users {
            .user-item {
                width: calc((100% - 40px) / 3);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 40px) / 3);
            }
        }

        .atlas-list {
            .atla-item {
                width: calc((100% - 40px) / 3);
            }
        }
    }

    .game {
        .game-top {
            .basic {
                padding: 0px 40px !important;
            }
        }

        .info-right-bar {
            right: 20px !important;
        }

        .center-info {
            .panel-tit {
                padding-left: 20px;
            }

            .gm-imgs {
                .img-item {
                    margin-left: 20px;
                    width: 310px !important;
                    margin-right: 0px !important;

                    &:nth-child(5n) {
                        margin-right: 0px !important;
                    }
                }
            }
        }
    }
}

@media (max-width:1360px) {
    .homes .nine-home-covers li{
        // width:calc((100% - 96px) / 3);
        height:260px;
    }
    .pro-header.active .search-bx{
        position: fixed;
        width:inherit;
        left:20px;right:20px;
    }
    .mk-cus-ddl.rank-ddl{
        .sub-dd-block{
            left:-50px;
        }
    }
    .game-page {
        .game-top .basic{
            
            .game-desc,.gm-tag-box{
                max-width:50% !important;
            }
        }
        
        .center-info{
            .gm-imgs{
                .img-item{
                    // width:calc((100% - 40px) / 3) !important;
                }
            }
        }
    }
    .rank-page{
        flex-direction: column;
        padding-left:0px !important;
        .rank-l{
            width:100%;
            max-width:100% !important;
        }
        .rank-r{
            display: none;
        }
    }
    .recruit-page .recruit-page-conbox{
        .filter{
            grid-gap:10px;
            flex-direction:column;
            .search-bx{
                margin-right:0px !important;
            }
            .other{
                width:100% !important;
                >div{
                    width:100% !important;
                }
            }
        }
        .layout-box{
            .left{
                width:60% !important;
                .job-item{
                    height:inherit !important;
                    flex-wrap:wrap;
                    .job-l{
                        width:100%;
                        margin-bottom:15px;
                    }
                    .job-r{
                        width:100%;
                        min-width:inherit !important;
                        flex-direction:column;
                        grid-gap:20px;
                        margin-top:20px;
                        .jo-pro-item{
                            white-space: nowrap;
                            display: flex;
                            width:100%;
                            justify-content: space-between;
                            margin-right:0px !important;
                            .pro-value{
                                margin-top:0px !important;
                            }
                        }
                    }
                }
                .j-img-box{
                    min-width:60px;
                }
            }
            .right{
                width:40% !important;
                .btn{
                    width:100% !important;
                }
            }
        }
    }
    .mx-1566 {
        max-width: 80% !important;
    }
    .publish-game-page,.publish-work-page,.publish-article-page {
        form {
            flex-direction: column;

            .basic-box {
                width: 100%;
            }

            .game-img-workbox {
                margin-left: 0px;
                width: 100%;
                margin-top: 10px;
            }
        }
    }

    .collections-page {
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 40px) / 3);
            }
        }
    }

    .search-page {
        .jitu-wrap {
            .data-box {
                width: calc((100% - 20px) / 2)
            }
        }

        .list-box {
            .bdl-data-item {
                width: calc((100% - 40px) / 3)
            }
        }
    }

    .game-tab-page {
        .list-box {
            .bdl-data-item {
                width: calc((100% - 40px) / 3);
            }
        }
    }

    .layout-container {
        
        .homes{
            .ald-ba-data{
                .data-wrap{
                    &.big{
                        .bdl-data-item{
                            width: calc((100% - 40px) / 3);
                        }
                    }
                }
            }  
        }
        .games-page {
            .games-data.small {
                .gd-item {
                    width: calc((100% - 40px) / 3);
                }
            }

            .games-data.big {
                .gd-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }

        .ald-ba-data {
            .data-wrap {
                .bdl-data-item {
                    width: calc((100% - 60px) / 4);
                }
            }
        }

        .content-box {
            .dx-vd-item {
                width: calc((100% - 40px) / 3);
            }
        }

        .following-page{
            .mk-rd-datas{
                .games{
                    .fav-d-item {
                        width: calc((100% - 40px) / 3);
                    }
                }
            }
        }

        .game-list-page {
            .games-data {
                .gd-item {
                    width: calc((100% - 60px) / 4);
                }

                &.small.show-filter {
                    .gd-item {
                        width: calc((100% - 40px) / 3)
                    }
                }
            }
        }

        .videos-list-page {
            .games-data {
                .dx-vd-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }

        .hot-row {
            li {
                width: calc((100% - 40px) / 3) !important;

                &:nth-child(3) {
                    display: none;
                }
            }
        }
    }

    .follow-exclusive-settings{
        .users {
            .user-item {
                width: calc((100% - 40px) / 3);
            }
        }

        // .atlas-layout-column {
        //     .fav-d-item {
        //         width: calc((100% - 20px) / 2);
        //     }
        // }

        .atlas-list {
            .atla-item {
                width: calc((100% - 40px) / 3);
            }
        }
    }

    .works-page,
    .article-page {
        .wp-content-lft {
            .wct-wrap {
                width: 100%;

                .work-datas {
                    .wk-d-item {
                        min-height:inherit;
                        .img-box {
                            height: 360px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width:1280px) {
    .homes{
        .nine-home-main{
            // top:-70px;
        }
        .n-c-n-item{
            .n-c-n-item-bot{
                padding-left:10px;
                padding-right:10px;
            }
            >span{
                width:100%;
            }
            .b-tit{
                // font-size:16px;
            }
            .b-desc{
                // margin-top:10px;
                // margin-bottom:10px;
            }
            img{
                object-fit: cover;
                width:100%;
                height:100%;
            }
        }
    }
    .homes .nine-home-covers li{
        // width:calc((100% - 96px) / 3);
        height:220px;
    }
    .private-letter-win-modal{
        // width:96%;
        // left:calc((100% - 96%) / 2);
        .ant-modal{
            width:96% !important;
        }
    }
    .recruit-info-modal{
        // width:96%;
        // left:calc((100% - 96%) / 2);
        .ant-modal{
            width:96% !important;
        }
    }
    .layout-container {
        .homes{
            .ald-ba-data{
                .data-wrap{
                    &.big{
                        .bdl-data-item{
                            // width: calc((100% - 20px) / 2);
                            // height:350px;
                        }
                    }
                }
            }  
        }
        .games-data.big {
            .gd-item {
                width: calc((100% - 20px) /2) !important;
                // height:350px;
            }
        }
    }
    .search-by-image-result-page .layout-right{
        width:280px;
        min-width:280px;
        margin-left:10px;
    }
    .game-page .game-top{
        .basic {
            .g-title{
                // max-width:100% !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            // padding:88px 10px 0px 60px !important;
            .game-desc,.gm-tag-box{
                max-width:53% !important;
            }
        }
        .pro-marquee-comments{
            right:70px !important;
        }
        
    }
}

.show-l-filter-mask{
    position: fixed;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;    
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: saturate(180%) blur(16px);
    z-index:116;
    // opacity:0;
}
@media (max-width:1080px) {
    .homes .nine-center-nav .n-c-n-item{
        .n-c-n-item-bot .b-tit{
            margin-top:0px;
        }
    }
    .homes .nine-home-covers li{
        // width:calc((100% - 96px) / 3);
        height:180px;
    }
    .list-data-box .top-filter-area .col-side-bar{
        display:block;
    }
    .list-data-box .selected-filters{
        margin-top:0px;
    }
    .list-data-box .top-filter-area{
        flex-direction: column;
        align-items: flex-start;
        grid-gap:20px;
    }
    .sp-container{
        left:35px !important;
    }
    .list-wrap-flex .search-area{
        &.mobile{
            display: none;
        }
        &.is-mobile-fix{
            display:inherit;
            position: fixed;
            z-index:117;
            top:0px;
            left:0px;
            bottom:0px;
            border-radius:0px;
            .filter-by{
                max-height: calc(100vh - 80px);
                min-height: calc(100vh - 80px);
                // margin-top:20px;
            }
            .close-sl-filter{
                width:40px;height:40px;
                min-height:40px;
                background:url('../../assets/pro/l_ct_clr.svg') no-repeat;
                background-size:30px;
                background-position: center;
                display: block;
                float: right;
                position: absolute;
                right:20px;
                top:40px;
                z-index:11;
            }
        }
    }
    .game-page .game-top{
        .basic {
            .g-title{
                white-space: wrap;
                overflow: inherit;
                text-overflow:inherit;
            }
        }
    }
    .layout-container {
        
        
        .homes{
            .ald-ba-data{
                .data-wrap{
                    &.big{
                        .bdl-data-item{
                            width: calc((100% - 20px) / 2);
                        }
                    }
                }
            }  
        }
        .games-data.big {
            .gd-item {
                width: calc((100% - 20px) /2) !important;
                // height: 196px !important;
            }
        }
    }
    .rank-page .rank-l .top-line{
        .top-tabs{
            font-size:16px !important;
            grid-gap:15px !important;
        }
    }
    .content-box{
        padding-right:20px;
    }
    .search-by-image-result-page .layout-right{
        width:280px;
        min-width:280px;
        margin-left:10px;
    }
    // .game-list-page .sch-sticky,.img-list-page .sch-sticky{
    //     top:300px;
    // }
    // .screenshot-page .img-datas .sch-sticky{
    //     top:290px;
    // }
    .search-page .list-wrap .filter-by{
        top:310px;
    }
    .search-page .first-result-row{
        flex-wrap:wrap;
        .result-item{
            width:100%;
        }
    }
    .game-page .game-top .basic {
        .g-title{
            max-width:100% !important;
        }
        .game-desc,.gm-tag-box{
            max-width:100% !important;
        }
    }
    .comp-article-page{
        .article-top{
            max-width:85% !important;
        }
        .tj-box {
            max-width:85% !important;
            .xg-games{
                .bdl-data-item{
                    width:calc((100% - 40px) / 3) !important;
                    &:last-child{
                        display: none;
                    }
                }
            }
        }
    }
    // .pro-header .search-bx .pro-search-full-box .psf-wrap{
    //     max-height:500px;
    //     overflow-y:auto;
    //     .pro-hot-container{
    //         grid-gap:10px;
    //         a{
    //             margin:0px !important;
    //             width:calc((100% - 10px) / 2) !important;
    //         }
    //     }
    // }
    .game-list-page {
        .games-data {

            &.small.show-filter {
                .gd-item {
                    width: calc((100% - 20px) / 2) !important;
                }
            }
        }
    }
    .search-page .gp-filter{
        .gp-img-layout{
            justify-content: space-between;
            .seach-bx{
                display: none;
            }
            .gp-img-layout-r{
                width:inherit;
            }
        }
        .mobile{
            display: inherit;
            margin-left:0px;
            margin-top:10px;
            
            .q-f-item-wrap{
                display: flex;
                align-items: center;
                // padding-left:10px;
                grid-gap:5px;
            }
        }
    }
    .game-page .center-info .gm-imgs .img-item{
        width:calc((100% - 40px) / 3) !important;
    }
    .manage-page .manage-data-box .list .list-item{
        // flex-wrap:wrap;
        .ldata{
            width:80%;
            .basic{
                width:80%;
                display: flex;
                flex-direction:column;
                .tit{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    width:80%;
                }
            }
        }
        .r-action{
           display: flex;
           flex-direction: column;
           grid-gap:20px;
        }
    }
    .mk-cus-ddl .sub-dd-block.multiple{
        width:700px !important;
        .wrap{
            max-height:300px;
            overflow-y: auto;
        }
        .sub-ddls{
            li{
                width:calc((100% - 50px) / 6);
            }
        }
    }
    .publish-job-win{
        width:inherit !important;
    }
    .recruit-info-modal-page .recruit-info,.ant-modal{
        // width:96% !important;
    }
    .recruit-info-modal-page .recruit-info{
        // padding:20px !important;
    }
    .publish-job-win{
        padding-left:20px !important;
        padding-right:20px !important;
        padding-bottom:20px !important;
        .job-form-box{
            max-height:400px;
            overflow-y:auto;
            padding-right:20px;
            margin:20px 0px;
        }
    }
    .recruit-info-modal-page .recruit-info .right{
    //    min-width:inherit !important;
    }
    .game-page .center-info .gm-imgs.sp-columns .img-item{
        width:calc((100% - 60px) / 4) !important;
    }
    .game-page{
        .center-info .xg-games{
            .bdl-data-item{
                width:calc((100% - 40px) / 3) !important;
                &:last-child{
                    display: none;
                }
            }
        }
    }
    .mx-1566{
        max-width:80% !important;
    }
    .pro-marquee-comments{
        display: none !important;
    }
    .layout-container {
        .game-list-page {
            .games {
                .fav-d-item {
                    width: calc((100% - 20px) / 2);
                }
            }
        }
    }

    .collections-page {
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 20px) / 2);
            }
        }
    }

    .search-page {
        .list-box {
            .bdl-data-item {
                width: calc((100% - 40px) / 3) !important;
            }
        }
        .jitu-wrap.clt-fld-area{
            .data-box{
                width: calc((100% - 40px) / 3) !important;
            }
        }
        .game-tab-page{
            .list-box{
                .bdl-data-item{
                    width: calc((100% - 20px) / 2) !important;
                }
            }
        }
    }

    .works-page,
    .article-page {
        .wp-content-rt {
            display: none;
        }
    }
    .rank-page .list-box .list-item{
        flex-direction:column;
        .left{
            width:100%;
        }
        .follow-btn{
            margin-top:10px;
            width:100% !important;
        }
    }
    .img-component{
        .face-area{
            flex-direction: column;
            .l-face-area{
                justify-content: space-between;
                width:100%;
                .face-con{
                    margin-left:0px !important;
                }
            }
            .author-info{
                width:100%;
                margin-top:20px;
                justify-content: flex-end;
            }
        }
    }
    .uhome {
        .user{
            // flex-direction:column;
            .rbtns{
                width:max-content;
                // margin-top:40px;
                justify-content: flex-end;
                .private-to{
                    margin-left:0px;
                }
            }
        }
        .fav-datas {
            .fav-d-item {
                width: calc((100% - 20px) /2);
            }
        }

        .video-datas {
            .fav-d-item {
                width: calc((100% - 20px) /2);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 20px) / 2);
            }
        }
    }

    .center-b-area {
        .b-a-left {
            .ba-datas {
                .bdl-data-item {
                    width: calc((100% - 20px) / 2) !important;
                    // height: 259px !important;

                    // &:nth-child(n+4) {
                    //     display: none;
                    // }
                }
            }
        }
    }

    .homes .home-tabs{
        grid-gap:0px;
        a{
            white-space: nowrap;
        }
    }
    .main-navs{
        display: none;
    }
    .layout-container {
        .games-page {
            .games-data.big {
                .gd-item {
                    width: calc((100% - 20px) / 2);
                }
            }
        }
        .top-games {
            li {
                height: 178px !important;

                &:nth-child(3) {
                    height: 178px !important;
                }
            }
        }

        .ald-ba-data {
            .data-wrap {
                .bdl-data-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }

        .content-box {
            .dx-vd-item {
                width: calc((100% - 20px) / 2);
            }
        }
        .following-page{
            .mk-rd-datas{
                .games{
                    .fav-d-item {
                        width: calc((100% - 20px) / 2);
                    }
                }
            }
        }

        .game-list-page {
            .games-data {
                .gd-item {
                    width: calc((100% - 40px) / 3);
                }
            }
        }

        .videos-list-page {
            .games-data {
                .dx-vd-item {
                    width: calc((100% - 20px) / 2);
                }
            }
        }

        .hot-row {
            li {
                width: calc((100% - 20px) / 2) !important;

                &:nth-child(2) {
                    display: none;
                }
            }
        }
    }

    .follow-exclusive-settings,.following-page  {
        .users {
            .user-item {
                width: calc((100% - 20px) / 2);
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width: calc((100% - 20px) / 2);
            }
        }

        .atlas-list {
            .atla-item {
                width: calc((100% - 20px) / 2);
            }
        }
    }
}

@media (max-width:800px) {
    .layout-container {
        .games-data.big {
            .gd-item {
                // width: 100% !important;
                // height: 262px;
            }
        }
    }
    .game-list-page {
        .games-data {
            .gd-item {
                // width: calc((100% - 60px) / 4);
            }

            &.small.show-filter {
                .gd-item {
                    width: 100% !important;
                }
            }
        }
    }
    .game-page .center-info .gm-imgs .img-item{
        width:calc((100% - 20px) / 2) !important;
    }
    .layout-container .rank-page {
        .list-box {
            .list-item {
                width: 100%;
            }
        }
    }

    .layout-container {
        .games-page {
            .games-data.big {
                .gd-item {
                    width:100%;
                }
            }
        }
        .game-list-page {
            .games {
                .fav-d-item {
                    width: 100%;
                }
            }
        }
    }

    .search-page {
        .video-wrap.vd-list-area {
            .data-box {
                width: 100%;
            }
        }

        .jitu-wrap {
            .data-box {
                width: 100%
            }
        }
    }

    .search-page {
        .list-box {
            .bdl-data-item {
                width: 100%
            }
        }
    }

    .game-tab-page {
        .list-box {
            .bdl-data-item {
                width: 100%;
            }
        }
    }

    .layout-container {
        .games-page {
            .games-data.small {
                .gd-item {
                    width: 100%;
                }
            }
        }

        .content-box {
            .dx-vd-item {
                width: 100%;
            }
        }

        .following-page{
            .mk-rd-datas{
                .games{
                    .fav-d-item {
                        // width: 100%;
                    }
                }
            }
        }

        .game-list-page {
            .games-data {
                .gd-item {
                    width: 100%;
                }
            }
        }

        .videos-list-page {
            .games-data {
                .dx-vd-item {
                    width: 100%;
                }
            }
        }

        .hot-row {
            li {
                width: 100% !important;

                &:nth-child(1) {
                    display: none;
                }
            }
        }
    }

    .follow-exclusive-settings {
        .users {
            .user-item {
                width: 100%;
            }
        }

        .atlas-layout-column {
            .fav-d-item {
                width:  100%;;
            }
        }

        .atlas-list {
            .atla-item {
                width:  100%;;
            }
        }
    }
}